/* Canva canonical v93: shared image cards and the contextual asset drawer. */
#viewEditor.guided-studio { --guided-asset-drawer-width: 280px; }
.guided-asset-workspace, .guided-asset-drawer { font-family: "Permutrix UI Inter", "Inter", system-ui, "Segoe UI", sans-serif; }
#viewEditor.guided-studio .guided-layer-drawer { left: 6px; }
#viewEditor.guided-studio .guided-layer-drawer-summary { margin-top: 0; }
#viewEditor.guided-studio .guided-layer-drawer-toggle {
 width: 36px; min-width: 36px; height: 36px; padding: 0; border: 0;
 border-radius: 6px; background: transparent; flex: 0 0 36px;
}
#viewEditor.guided-studio .guided-layer-drawer-title { display: none; }
#viewEditor.guided-studio .guided-layer-drawer-chevron { font-size: 24px; color: var(--text-main); }
#viewEditor.guided-studio .layer-panel-header { gap: 2px; min-height: 42px; padding: 0 8px; }
#viewEditor.guided-studio .layer-panel-header h2 { flex: 1; min-width: 0; font-size: 12px; }
.guided-asset-match-host, .guided-asset-delete-host { display: inline-flex; position: relative; flex: 0 0 36px; }
#viewEditor.guided-studio .guided-asset-header-action,
#viewEditor.guided-studio .guided-asset-drawer-actions .btn.icon-only {
 width: 36px; min-width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px;
 display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--text-main);
}
.guided-asset-header-action svg { width: 18px; height: 18px; }
.guided-asset-header-action[data-match-count]:not([data-match-count=""])::after {
 content: attr(data-match-count); position: absolute; right: 0; top: 0; font-size: 10px;
 background: var(--card); border-radius: 4px; padding: 0 2px;
}
#viewEditor.guided-studio .guided-asset-header-action:disabled { opacity: .4; pointer-events: none; }
#viewEditor.guided-studio .guided-asset-drawer {
 width: min(280px, calc(100vw - var(--guided-layer-drawer-width) - 22px));
 margin-left: 8px; border: 1px solid var(--border); border-radius: 8px;
 background: #141820; color: var(--text-main); overflow: visible;
}
html[data-theme="light"] #viewEditor.guided-studio .guided-asset-drawer { background: #f6f7fa; }
#viewEditor.guided-studio .guided-asset-drawer.is-expanded { width: calc(100vw - var(--guided-layer-drawer-width) - 24px); }
#viewEditor.guided-studio .guided-asset-drawer-head,
#viewEditor.guided-studio .guided-asset-drawer.is-expanded .guided-asset-drawer-head {
 display: flex; align-items: center; gap: 0; padding: 8px 8px 0; min-height: 44px; border: 0;
}
.guided-asset-drawer-kicker { flex: 1; color: var(--text-main); font-size: 13px; text-transform: none; }
.guided-asset-drawer-actions { display: flex; flex: 0 0 auto; gap: 0; margin-left: 0; }
.guided-asset-drawer-actions #btnGuidedImportAssets { font-size: 22px; }
.guided-asset-drawer-actions #btnGuidedAssetMore { font-size: 23px; padding-bottom: 6px; }
.guided-asset-drawer-actions #btnExpandGuidedAssets,
.guided-asset-drawer-actions #btnCloseGuidedAssets { font-size: 20px; }
.guided-asset-more { position: relative; }
#guidedAssetMoreMenu { position: absolute; z-index: 5; right: 0; top: 38px; min-width: 205px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px #0006; }
#guidedAssetMoreMenu[hidden] { display: none; }
#guidedAssetMoreMenu .btn { width: 100%; min-height: 36px; white-space: normal; text-align: left; }
.guided-asset-drawer-info { display: flex; justify-content: space-between; gap: 8px; padding: 5px 16px 10px; font-size: 12px; color: var(--text-muted); }
#guidedAssetDrawerCount { margin-left: auto; }
.guided-asset-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 160px; font-size: 13px; }
.guided-asset-drawer-empty[hidden] { display: none; }
#btnGuidedEmptyImport { min-width: 136px; min-height: 36px; background: var(--card); }
#viewEditor.guided-studio .guided-asset-drawer.is-empty:not(.is-search-open) .guided-asset-drawer-browser { display: none; }
#viewEditor.guided-studio .guided-asset-drawer.is-empty.is-search-open .guided-asset-drawer-empty { flex: 0; }
#viewEditor.guided-studio .guided-asset-drawer .thumbGrid {
 display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 8px 12px;
 align-content: start; align-items: start; scrollbar-gutter: stable;
}
#viewEditor.guided-studio .guided-asset-drawer.is-expanded .thumbGrid { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.guided-asset-workspace-list { container-type: inline-size; }
.guided-asset-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@container (max-width: 407px) { .guided-asset-choice-grid { grid-template-columns: minmax(0, 1fr); } }
#viewEditor .asset-card {
 position: relative; display: flex; flex-direction: column; gap: 0; padding: 10px;
 min-width: 0; height: auto; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
 background: var(--card); color: var(--text-main); cursor: grab; box-shadow: none;
}
#viewEditor .asset-card.live, #viewEditor .asset-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
#viewEditor .asset-card.selected:not(.live) { border-color: var(--border); box-shadow: none; }
#viewEditor .asset-card.is-locked { border-left: 1px solid var(--border); }
#viewEditor .asset-card.is-locked.live { border-left-color: var(--primary); }
#viewEditor .asset-card .asset-card-preview {
 appearance: none; display: flex; align-items: center; justify-content: center; position: relative;
 width: 125px; height: 125px; min-height: 125px; max-width: 100%; padding: 0; margin: 16px auto 12px;
 border: 0; border-radius: 2px; overflow: hidden; cursor: grab; flex: 0 0 auto;
 background-color: #1b2029; background-image: conic-gradient(#262d38 25%, transparent 0 50%, #262d38 0 75%, transparent 0); background-size: 16px 16px;
}
#viewEditor .guided-asset-drawer .asset-card-preview { width: 152px; height: 152px; min-height: 152px; }
html[data-theme="light"] #viewEditor .asset-card-preview { background-color: #f5f5f7; background-image: conic-gradient(#e5e6eb 25%, transparent 0 50%, #e5e6eb 0 75%, transparent 0); }
#viewEditor .asset-card-preview img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#viewEditor .asset-card-placeholder { font-size: 12px; color: var(--text-muted); }
#viewEditor .asset-card.is-excluded .asset-card-preview { opacity: .55; }
#viewEditor .asset-card-check {
 position: absolute; z-index: 2; top: 1px; left: 1px; right: auto; bottom: auto;
 width: 36px; height: 36px; margin: 0; display: flex; align-items: center; justify-content: center;
 border-radius: 8px; background: color-mix(in srgb, var(--card) 94%, transparent); cursor: pointer;
}
#viewEditor .asset-card-check input { width: 18px; height: 18px; min-width: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; }
#viewEditor .asset-card-body { display: flex; flex-direction: column; gap: 6px; padding: 0; min-width: 0; }
#viewEditor .asset-card-name {
 appearance: none; display: block; width: 100%; min-width: 0; padding: 0; margin: 0;
 border: 0; border-radius: 2px; background: transparent; color: var(--text-main); text-align: left;
 font: inherit; font-size: 13px; font-weight: 550; line-height: 1.4; white-space: normal;
 overflow: visible; overflow-wrap: anywhere; word-break: normal; text-overflow: clip; cursor: pointer;
}
#viewEditor .asset-card-tags { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; min-height: 0; max-height: none; overflow: visible; }
#viewEditor .asset-card-tags[hidden] { display: none; }
#viewEditor .asset-card-tags .tag { font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--text-muted); padding: 0; border: 0; background: transparent; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
#viewEditor .asset-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 0; margin-top: 8px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
#viewEditor .asset-card-actions .asset-card-action,
#viewEditor .asset-card-actions .asset-card-move {
 position: relative; inset: auto; display: inline-flex; align-items: center; justify-content: center;
 width: 36px; height: 36px; min-width: 36px; margin: 0; padding: 0; background: transparent;
 border: 0; border-radius: 6px; color: var(--text-muted); cursor: pointer; opacity: 1;
}
#viewEditor .asset-card-actions .asset-card-action { font-size: 20px; }
#viewEditor .asset-card-actions svg, #viewEditor .asset-card-actions .guided-asset-choice-icon { width: 16px; height: 16px; }
#viewEditor .asset-card-actions .asset-move-control-icon { font-size: 20px; }
#viewEditor .asset-card-move select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#viewEditor .asset-card-action[aria-pressed="true"] { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
#viewEditor .asset-card-action:hover, #viewEditor .asset-card-move:hover { background: color-mix(in srgb, var(--text-main) 7%, transparent); }
.asset-card :is(button, input):focus-visible, .asset-card-move:focus-within, .guided-asset-delete-host:focus-visible, .guided-asset-match-host:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.asset-detail-original { display: flex; height: 160px; align-items: center; justify-content: center; background: var(--bg-panel); margin: 8px 0; }
.asset-detail-original img { max-width: 100%; max-height: 100%; object-fit: contain; }