.vbd-ai-panel {
	margin: 14px 0 4px;
	padding: 14px 16px;
	border: 1px solid #ead9f2;
	border-radius: 12px;
	background: linear-gradient(180deg, #fdf7ff 0%, #fbfbfe 100%);
}
.vbd-ai-head {
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 4px;
	color: #7a1fa2;
}
.vbd-ai-hint {
	font-size: 12.5px;
	color: #6b6b6b;
	margin-bottom: 10px;
	line-height: 1.4;
}
.vbd-ai-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.vbd-ai-kw {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #d9c3e6;
	border-radius: 8px;
	font-size: 14px;
}
.vbd-ai-btn {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: #b026c9;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.vbd-ai-btn:hover { background: #96209f; }
.vbd-ai-btn:disabled { opacity: .5; cursor: not-allowed; }
.vbd-ai-status {
	min-height: 18px;
	margin-top: 8px;
	font-size: 12.5px;
	color: #7a1fa2;
}
.vbd-ai-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.vbd-ai-results:empty { margin-top: 0; }
.vbd-ai-card {
	border: 2px solid #e6e6ef;
	border-radius: 10px;
	padding: 6px;
	text-align: center;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vbd-ai-card.is-selected {
	border-color: #b026c9;
	box-shadow: 0 0 0 2px rgba(176, 38, 201, .18);
}
.vbd-ai-thumb {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 6px;
	background: #f4f4f8;
}
.vbd-ai-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbd-ai-caption { font-size: 12px; color: #555; margin: 6px 0 4px; }
.vbd-ai-use {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #d9c3e6;
	border-radius: 6px;
	background: #faf3ff;
	color: #7a1fa2;
	font-size: 12.5px;
	cursor: pointer;
}
.vbd-ai-card.is-selected .vbd-ai-use { background: #b026c9; color: #fff; border-color: #b026c9; }
.vbd-ai-panel:not(.vbd-ai-ready) .vbd-ai-row { opacity: .55; }

/* Loading state */
.vbd-ai-loading {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 22px 16px;
	border: 1px dashed #e0c8ee;
	border-radius: 10px;
	background: #fdf7ff;
}
.vbd-ai-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #ecd7f5;
	border-top-color: #b026c9;
	border-radius: 50%;
	animation: vbd-ai-spin 0.9s linear infinite;
}
@keyframes vbd-ai-spin { to { transform: rotate(360deg); } }
.vbd-ai-loading-title { font-weight: 700; color: #7a1fa2; font-size: 14.5px; }
.vbd-ai-loading-msg { font-size: 12.5px; color: #6b6b6b; line-height: 1.5; max-width: 420px; }
@media (prefers-reduced-motion: reduce) {
	.vbd-ai-spinner { animation-duration: 2.4s; }
}

/* Shape picker */
.vbd-shape-section {
	margin-top: 18px;
	border-top: 1px solid #ead9f2;
	padding-top: 14px;
}
.vbd-shape-head { margin-bottom: 4px; }
.vbd-shape-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.vbd-shape-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 74px;
	padding: 8px 4px;
	border: 2px solid #e6e6ef;
	border-radius: 10px;
	background: #fff;
	color: #b026c9;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vbd-shape-ico { width: 40px; height: 40px; }
.vbd-shape-ico svg { width: 100%; height: 100%; display: block; }
.vbd-shape-label { font-size: 11px; color: #555; }
.vbd-shape-item:hover { border-color: #d9c3e6; }
.vbd-shape-item.is-selected {
	border-color: #b026c9;
	box-shadow: 0 0 0 2px rgba(176, 38, 201, .18);
}
.vbd-ai-panel:not(.vbd-ai-ready) .vbd-shape-row {
	opacity: .5;
	pointer-events: none;
}

/* Shape editor */
.vbd-shape-editor { margin-top: 14px; }
.vbd-shape-stage { display: flex; justify-content: center; }
.vbd-shape-canvas {
	width: 300px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #faf7fc;
	/* No border-radius: the editor must match the applied output exactly
	   (a Square crop has sharp corners, like Portrait/Landscape). */
	touch-action: none;
	cursor: grab;
}
.vbd-shape-canvas:active { cursor: grabbing; }
.vbd-shape-zoom-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: #555;
}
.vbd-shape-zoom { flex: 1; }
.vbd-shape-actions { display: flex; gap: 10px; margin-top: 12px; }
.vbd-shape-actions button {
	padding: 10px 16px;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
}
.vbd-shape-cancel { background: #ededed; color: #444; }
.vbd-shape-apply { background: #b026c9; color: #fff; }
.vbd-shape-apply:disabled { opacity: .6; cursor: not-allowed; }
.vbd-shape-tip { font-size: 12px; color: #888; margin-top: 8px; }
.vbd-shape-status:empty { display: none; }