.dms3-haiku {
	--dms3-haiku-primary-color: #E62F81;
	--dms3-haiku-secondary-color: #F68922;
	--dms3-haiku-third-color: #FFBA18;
	--dms3-haiku-background-color: #fff;
	--dms3-haiku-background-color-secondary: #FFF5EC;
	--dms3-haiku-text-color: #333;
	--dms3-haiku-ui-font: "Google Sans Flex", sans-serif!important;
	--dms3-haiku-border-radius: 16px;
	--dms3-haiku-border-radius-small: 12px;
	--dms3-haiku-padding: 16px;
	--dms3-haiku-padding-small: 6px;
	--dms3-haiku-padding-large: 30px;
	--dms3-haiku-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
	--dms3-haiku-box-shadow-large: 0 24px 60px 0 rgba(0, 0, 0, 0.06);
	--dms3-haiku-font-size: 14px;
	--dms3-haiku-font-size-medium: 16px;
	--dms3-haiku-status-info-color: #f5a623;
	--dms3-haiku-status-success-color: #2e7d32;
	--dms3-haiku-status-error-color: #d32f2f;
}
.dms3-haiku {
	max-width: 760px;
	margin: 0 auto;
	font-family: var(--dms3-haiku-ui-font);
}

.dms3-haiku__panel {
	background: var(--dms3-haiku-background-color);
	border-radius: var(--dms3-haiku-border-radius);
	padding: var(--dms3-haiku-padding-large);
	box-shadow: var(--dms3-haiku-box-shadow-large);
}

.dms3-haiku__label {
	display: block;
	font-weight: 700;
	margin: 0;
	color: var(--dms3-haiku-text-color);
	font-size: var(--dms3-haiku-font-size-medium);
}

.dms3-haiku__description {
	margin: 0;
	font-size: var(--dms3-haiku-font-size);
	color: var(--dms3-haiku-text-color);
	opacity: 0.85;
}

.dms3-haiku__textarea,
.dms3-haiku__textarea:focus {
	width: 100%!important;
	min-height: 100px!important;
	border: 0!important;
	background: var(--dms3-haiku-background-color-secondary)!important;
	border-radius: var(--dms3-haiku-border-radius)!important;
	padding: var(--dms3-haiku-padding)!important;
	font-size: var(--dms3-haiku-font-size)!important;
	color: var(--dms3-haiku-text-color)!important;
	resize: vertical!important;
	margin-bottom: 18px!important;
}

.dms3-haiku__styles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 16px;
	background-color: var(--dms3-haiku-background-color-secondary);
	padding: var(--dms3-haiku-padding-small);
	border-radius: var(--dms3-haiku-border-radius);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.dms3-haiku__styles::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: var(--dms3-style-glass-w, 0px);
	height: var(--dms3-style-glass-h, 0px);
	transform: translate3d(var(--dms3-style-glass-x, 0px), var(--dms3-style-glass-y, 0px), 0);
	border-radius: var(--dms3-haiku-border-radius-small);
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.8) 42%,
		rgba(255, 255, 255, 0.6) 74%,
		rgba(255, 255, 255, 0.4) 100%
	);
	border: 1px solid rgba(255, 255, 255, 1);
	box-shadow: var(--dms3-haiku-box-shadow);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	opacity: 0;
	transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), width 300ms cubic-bezier(0.22, 1, 0.36, 1), height 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
	pointer-events: none;
	z-index: 0;
}

.dms3-haiku__styles.has-glass::before {
	opacity: 1;
}

.dms3-haiku__style {
	border: 0;
	background: transparent;
	padding: var(--dms3-haiku-padding) var(--dms3-haiku-padding-large);
	border-radius: var(--dms3-haiku-border-radius-small);
	font-size: var(--dms3-haiku-font-size);
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: color 200ms ease;
}

.dms3-haiku__style.is-active {
	background: transparent;
	box-shadow: none;
	font-weight: 600;
}

.dms3-haiku__primary,
.dms3-haiku__secondary {
	border: 0;
	cursor: pointer;
	border-radius: var(--dms3-haiku-border-radius);
	padding: calc(var(--dms3-haiku-padding)  * 1.5) var(--dms3-haiku-padding-large);
	font-size: var(--dms3-haiku-font-size);
	text-transform: uppercase;
	font-weight: 500;
}

.dms3-haiku__primary {
	width: 100%;
	background: linear-gradient(90deg, var(--dms3-haiku-primary-color) 0%, var(--dms3-haiku-secondary-color) 50%, var(--dms3-haiku-third-color) 100%);
	color: var(--dms3-haiku-background-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.dms3-haiku__button-icon {
	font-size: 22px;
	line-height: 1;
	flex: 0 0 auto;
}

.dms3-haiku__tertiary {
	width: 100%;
	margin-top: 8px;
	border: 0;
	background: transparent;
	color: var(--dms3-haiku-text-color);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--dms3-haiku-padding) var(--dms3-haiku-padding-large);
	font-size: var(--dms3-haiku-font-size);
	font-weight: 500;
	text-transform: uppercase;
}

.dms3-haiku__tertiary:hover,
.dms3-haiku__tertiary:focus-visible {
	opacity: 0.82;
}

.dms3-haiku__primary--ghost {
	background: var(--dms3-haiku-background-color-secondary);
	color: var(--dms3-haiku-text-color);
}

.dms3-haiku__status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--dms3-haiku-font-size);
	margin: -4px 0 10px;
	padding: 10px 12px!important;
	border: 1px solid transparent;
	border-radius: var(--dms3-haiku-border-radius-small);
	color: #000;
}

.dms3-haiku__status:empty {
	display: none;
}

.dms3-haiku__status-icon {
	font-size: 16px;
	line-height: 1;
	flex: 0 0 auto;
}

.dms3-haiku__status-text {
	color: #000;
}

.dms3-haiku__status.is-info,
.dms3-haiku__status.is-loading {
	border-color: var(--dms3-haiku-status-info-color);
	background: rgba(245, 166, 35, 0.1);
}

.dms3-haiku__status.is-info .dms3-haiku__status-icon,
.dms3-haiku__status.is-loading .dms3-haiku__status-icon {
	color: var(--dms3-haiku-status-info-color);
}

.dms3-haiku__status.is-success {
	border-color: var(--dms3-haiku-status-success-color);
	background: rgba(46, 125, 50, 0.1);
}

.dms3-haiku__status.is-success .dms3-haiku__status-icon {
	color: var(--dms3-haiku-status-success-color);
}

.dms3-haiku__status.is-error {
	border-color: var(--dms3-haiku-status-error-color);
	background: rgba(211, 47, 47, 0.1);
}

.dms3-haiku__status.is-error .dms3-haiku__status-icon {
	color: var(--dms3-haiku-status-error-color);
}

.dms3-haiku__image {
	width: 100%;
	height: auto;
	border-radius: var(--dms3-haiku-border-radius);
	display: block;
	margin-bottom: 14px;
}

.dms3-haiku__actions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.dms3-haiku__secondary {
	background: var(--dms3-haiku-background-color-secondary);
	color: var(--dms3-haiku-text-color);
}

.is-hidden {
	display: none;
}

.dms3-haiku.is-loading .dms3-haiku__primary[data-action-generate],
.dms3-haiku.is-loading .dms3-haiku__tertiary[data-action-random-mode] {
	opacity: 0.85;
	pointer-events: none;
}

@media (max-width: 780px) {
	.dms3-haiku {
		max-width: 100%;
	}

	.dms3-haiku__panel {
		border-radius: 0;
		padding: 0;
		box-shadow: none;
	}

	.dms3-haiku__styles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.dms3-haiku__style,
	.dms3-haiku__primary,
	.dms3-haiku__secondary {
		font-size: var(--dms3-haiku-font-size);
	}

	.dms3-haiku__style {
		padding: 12px 10px;
		min-width: 0;
		text-align: center;
	}

	.dms3-haiku__primary,
	.dms3-haiku__secondary,
	.dms3-haiku__tertiary {
		padding: 14px 16px;
	}

	.dms3-haiku__button-icon {
		font-size: 18px;
	}
}