.subin-design-studio-panel {
	max-width: none;
	padding: 0;
	overflow: hidden;
}

.subin-design-studio--grapesjs-shell {
	display: flex;
	flex-direction: column;
	min-height: 820px;
}

.subin-design-studio__toolbar {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto minmax(300px, 1fr);
	align-items: center;
	justify-content: stretch;
	gap: 12px;
	padding: 12px 16px;
	background: #fff;
	border-bottom: 1px solid #d8e2ea;
}

.subin-design-toolbar__left,
.subin-design-toolbar__right,
.subin-design-toolbar__shortcode {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.subin-design-toolbar__left {
	flex-wrap: nowrap;
	min-width: 0;
}

.subin-design-toolbar__center {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.subin-design-toolbar__right {
	justify-content: flex-end;
	flex-wrap: nowrap;
	min-width: 220px;
}

.subin-gjs-preview-state-switcher {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px;
	background: #f5f7fa;
	border: 1px solid #d8e2ea;
	border-radius: 6px;
}

.subin-gjs-preview-state-button.button {
	min-height: 28px;
	padding: 0 10px;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: #334e68;
}

.subin-gjs-preview-state-button.button:hover,
.subin-gjs-preview-state-button.button:focus {
	border-color: #b8c6d1;
	background: #fff;
	color: #102a43;
}

.subin-gjs-preview-state-button.is-active.button {
	border-color: #2271b1;
	background: #2271b1;
	color: #fff;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].button {
	color: #dc2626;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].button:hover,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].button:focus {
	border-color: #dc2626;
	color: #b91c1c;
	background: #fef2f2;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].is-active.button {
	border-color: #dc2626;
	background: #dc2626;
	color: #fff;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].is-active.button:hover,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].is-active.button:focus {
	border-color: #b91c1c;
	background: #b91c1c;
	color: #fff;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].button {
	color: #16a34a;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].button:hover,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].button:focus {
	border-color: #16a34a;
	color: #15803d;
	background: #f0fdf4;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].is-active.button {
	border-color: #16a34a;
	background: #16a34a;
	color: #fff;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].is-active.button:hover,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].is-active.button:focus {
	border-color: #15803d;
	background: #15803d;
	color: #fff;
}

.subin-design-toolbar__identity {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.subin-design-toolbar__identity h2 {
	margin: 0;
	overflow: hidden;
	max-width: 260px;
	font-size: 16px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.subin-design-toolbar__shortcode .subin-shortcode-pill {
	max-width: clamp(150px, 18vw, 260px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.subin-design-toolbar__right .subin-copy-feedback,
.subin-design-toolbar__right .subin-grapesjs-save-status {
	overflow: hidden;
	max-width: 90px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.subin-grapesjs-editor {
	--gjs-left-width: 286px;
	--subin-gjs-inspector-width: 360px;
	height: 760px;
	min-height: 640px;
}

.subin-grapesjs-editor .gjs-pn-views,
.subin-grapesjs-editor .gjs-pn-views-container {
	width: var(--subin-gjs-inspector-width);
}

.subin-grapesjs-editor .gjs-pn-views-container {
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.subin-grapesjs-editor .gjs-pn-btn[data-command="sw-visibility"],
.subin-grapesjs-editor .gjs-pn-btn[data-command="export-template"],
.subin-grapesjs-editor .gjs-pn-btn[title="View code"],
.subin-grapesjs-editor .gjs-pn-btn[title="View components"] {
	display: none !important;
}

.subin-grapesjs-editor .gjs-pn-btn[data-command="open-sm"],
.subin-grapesjs-editor .gjs-pn-btn[data-command="open-tm"],
.subin-grapesjs-editor .gjs-pn-btn[title="Style Manager"],
.subin-grapesjs-editor .gjs-pn-btn[title="Traits"],
.subin-grapesjs-editor .gjs-pn-btn[title="Settings"] {
	display: none !important;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector {
	display: none;
	color: #ddd;
	text-align: left;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__header {
	padding: 11px 12px;
	color: #f6f7f7;
	background: rgba(0, 0, 0, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__section {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__section > h3 {
	margin: 0;
	padding: 10px 12px;
	color: #f6f7f7;
	background: rgba(255, 255, 255, 0.045);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

.subin-grapesjs-editor .subin-gjs-trait-group-title {
	margin: 12px 0 8px;
	padding: 7px 9px;
	color: #172033;
	background: #eef4fb;
	border: 1px solid #d8e1ec;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.subin-grapesjs-editor .subin-gjs-trait-group-title:first-child {
	margin-top: 0;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__section[hidden],
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-sector[hidden] {
	display: none !important;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__traits .gjs-traits-label,
.subin-grapesjs-editor .subin-gjs-unified-inspector__styles .gjs-sm-header {
	display: none;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait {
	display: grid;
	grid-template-columns: minmax(78px, 0.85fr) minmax(0, 1fr);
	gap: 7px;
	align-items: center;
	padding: 7px 10px;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait .gjs-label {
	min-width: 0;
	color: #f6f7f7;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-label-wrp,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-field-wrp {
	width: auto;
	min-width: 0;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait .gjs-field,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait input,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait textarea,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait select {
	width: 100%;
}

.subin-grapesjs-editor .gjs-block-category .gjs-title {
	padding: 9px 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

.subin-grapesjs-editor .gjs-blocks-c {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 7px;
	padding: 9px;
}

.subin-grapesjs-editor .gjs-block {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 7px 9px;
	border-radius: 6px;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.subin-grapesjs-editor .gjs-block:hover,
.subin-grapesjs-editor .gjs-block:focus {
	border-color: rgba(255, 255, 255, 0.32);
	background-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
}

.subin-grapesjs-editor .gjs-block.gjs-bdrag {
	min-width: 180px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
}

.subin-grapesjs-editor .subin-gjs-block-label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	width: 100%;
	text-align: left;
}

.subin-grapesjs-editor .subin-gjs-block-label__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: #1d2327;
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

@media (max-width: 1100px) {
	.subin-grapesjs-editor {
		--gjs-left-width: 250px;
	}
}

.subin-grapesjs-editor .gjs-sm-sector-title {
	padding: 10px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

.subin-grapesjs-editor .gjs-sm-properties {
	padding: 8px 10px 10px;
}

.subin-grapesjs-editor .gjs-sm-property {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 9px;
	padding: 0;
}

.subin-grapesjs-editor .gjs-sm-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	letter-spacing: 0;
}

.subin-grapesjs-editor .gjs-sm-field,
.subin-grapesjs-editor .gjs-field {
	min-height: 30px;
	border-radius: 5px;
}

.subin-grapesjs-editor .gjs-sm-field input,
.subin-grapesjs-editor .gjs-sm-field select,
.subin-grapesjs-editor .gjs-field input,
.subin-grapesjs-editor .gjs-field select {
	min-height: 28px;
	font-size: 12px;
}

.subin-grapesjs-editor .subin-gjs-options-trait {
	display: grid;
	gap: 8px;
}

.subin-grapesjs-editor .subin-gjs-options-trait__rows {
	display: grid;
	gap: 8px;
}

.subin-grapesjs-editor .subin-gjs-options-trait__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 10px;
	color: #1d2327;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 6px;
}

.subin-grapesjs-editor .subin-gjs-options-trait__row label {
	display: grid;
	gap: 4px;
	margin: 0;
	color: #1d2327;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-gjs-options-trait__row input {
	width: 100%;
	min-height: 28px;
	padding: 4px 7px;
	color: #1d2327;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 12px;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-gjs-options-trait__row input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.subin-grapesjs-editor .subin-gjs-options-trait__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.subin-grapesjs-editor .subin-gjs-options-trait__actions .button {
	min-height: 26px;
	color: #1d2327;
	background: #f6f7f7;
	border-color: #8c8f94;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-gjs-options-trait__actions .button:hover,
.subin-grapesjs-editor .subin-gjs-options-trait__actions .button:focus {
	color: #0a4b78;
	background: #fff;
	border-color: #2271b1;
}

.subin-grapesjs-editor .subin-gjs-options-trait__row .button-link-delete {
	justify-self: start;
	color: #b32d2e;
	font-size: 12px;
	line-height: 1.4;
}

.subin-grapesjs-editor .subin-gjs-readonly-trait {
	width: 100%;
	min-height: 28px;
	color: #50575e;
	background: #f6f7f7;
	border-color: #dcdcde;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-gjs-text-trait {
	width: 100%;
	min-height: 28px;
	color: #1d2327;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-shadow: none;
}

.subin-grapesjs-editor textarea.subin-gjs-text-trait {
	min-height: 86px;
	line-height: 1.4;
	resize: vertical;
}

.subin-grapesjs-editor textarea.subin-gjs-html-trait {
	min-height: 220px;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	line-height: 1.5;
	tab-size: 2;
}

.subin-grapesjs-editor .subin-gjs-html-trait-wrap {
	display: grid;
	gap: 8px;
	width: 100%;
}

.subin-grapesjs-editor .subin-gjs-html-trait-button.button {
	width: 100%;
	justify-content: center;
}

.subin-grapesjs-editor .subin-gjs-text-trait:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait {
	display: grid;
	gap: 8px;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__group {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 9px;
	color: #1d2327;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 6px;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__group legend {
	padding: 0 3px;
	color: #1d2327;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__control {
	display: grid;
	grid-template-columns: minmax(74px, 0.9fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: #1d2327;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__control input,
.subin-grapesjs-editor .subin-gjs-field-style-trait__control select {
	width: 100%;
	min-height: 28px;
	color: #1d2327;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	font-size: 12px;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__control input[type="color"] {
	min-width: 44px;
	padding: 2px;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__control input:focus,
.subin-grapesjs-editor .subin-gjs-field-style-trait__control select:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.subin-grapesjs-editor .subin-gjs-field-style-trait__control em {
	color: #646970;
	font-size: 11px;
	font-style: normal;
}

.subin-grapesjs-editor .subin-gjs-row-actions-trait {
	display: grid;
	gap: 6px;
}

.subin-grapesjs-editor .subin-gjs-row-actions-trait .button {
	width: 100%;
	min-height: 28px;
	color: #1d2327;
	background: #f6f7f7;
	border-color: #8c8f94;
	box-shadow: none;
	text-align: center;
}

.subin-grapesjs-editor .subin-gjs-row-actions-trait .button:hover,
.subin-grapesjs-editor .subin-gjs-row-actions-trait .button:focus {
	color: #0a4b78;
	background: #fff;
	border-color: #2271b1;
}

.subin-grapesjs-editor .subin-gjs-row-actions-trait .button:disabled {
	color: #8c8f94;
	background: #f0f0f1;
	border-color: #dcdcde;
}

.subin-grapesjs-editor .subin-gjs-media-trait {
	display: grid;
	gap: 8px;
}

.subin-grapesjs-editor .subin-gjs-media-trait__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 78px;
	color: #50575e;
	background-color: #f6f7f7;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid #8c8f94;
	border-radius: 5px;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.subin-grapesjs-editor .subin-gjs-media-trait__preview--empty {
	background-image: none;
	background-size: auto;
}

.subin-grapesjs-editor .subin-gjs-media-trait__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.subin-grapesjs-editor .subin-gjs-media-trait__actions .button {
	min-height: 28px;
	color: #1d2327;
	background: #f6f7f7;
	border-color: #8c8f94;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-gjs-media-trait label {
	display: grid;
	gap: 4px;
	margin: 0;
	color: #dcdcde;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-gjs-media-trait select {
	width: 100%;
	min-height: 28px;
	color: #1d2327;
	background: #fff;
	border-color: #8c8f94;
	border-radius: 4px;
	font-size: 12px;
}

/* Unified Inspector polish. Scoped to the Design Studio GrapesJS editor only. */
.subin-grapesjs-editor .gjs-pn-views-container {
	overflow: hidden;
	background: #151f2a;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector {
	box-sizing: border-box;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	color: #dbe5ef;
	background: #151f2a;
	scrollbar-color: #53657a #151f2a;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector * {
	box-sizing: border-box;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: grid;
	gap: 3px;
	padding: 12px 14px;
	color: #f8fafc;
	background: #101823;
	border-bottom: 1px solid #2b3a4b;
	font-size: 13px;
	font-weight: 700;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__selected {
	display: block;
	overflow: hidden;
	color: #5d6b7a;
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__section {
	margin: 10px;
	overflow: hidden;
	background: #1c2836;
	border: 1px solid #2f4052;
	border-radius: 8px;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__section > h3 {
	padding: 10px 12px;
	color: #f8fafc;
	background: #243244;
	border-bottom: 1px solid #33465a;
	font-size: 12px;
	font-weight: 700;
	text-transform: none;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector__traits,
.subin-grapesjs-editor .subin-gjs-unified-inspector__styles {
	padding: 8px;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-traits-c,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-sectors,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-sector {
	background: transparent;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 6px;
	margin: 0 0 9px;
	padding: 0;
	background: transparent;
	border: 0;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait:last-child {
	margin-bottom: 0;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-trt-trait .gjs-label,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-label,
.subin-grapesjs-editor .subin-gjs-unified-inspector .subin-gjs-media-trait label,
.subin-grapesjs-editor .subin-gjs-unified-inspector .subin-gjs-options-trait__row label,
.subin-grapesjs-editor .subin-gjs-unified-inspector .subin-gjs-field-style-trait__control {
	color: #cbd8e6;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-label-wrp,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-field-wrp,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-field,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-field {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector input:not([type="checkbox"]):not([type="radio"]),
.subin-grapesjs-editor .subin-gjs-unified-inspector textarea,
.subin-grapesjs-editor .subin-gjs-unified-inspector select,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-field,
.subin-grapesjs-editor .subin-gjs-unified-inspector .gjs-sm-field {
	width: 100%;
	min-height: 34px;
	color: #f8fafc;
	background: #101823;
	border: 1px solid #42556b;
	border-radius: 6px;
	box-shadow: none;
	font-size: 13px;
	line-height: 1.35;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector input:not([type="checkbox"]):not([type="radio"]),
.subin-grapesjs-editor .subin-gjs-unified-inspector textarea,
.subin-grapesjs-editor .subin-gjs-unified-inspector select {
	padding: 6px 9px;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector textarea {
	min-height: 88px;
	resize: vertical;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector textarea.subin-gjs-html-trait {
	min-height: 240px;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	line-height: 1.5;
	tab-size: 2;
}

.subin-gjs-html-modal[hidden] {
	display: none !important;
}

.subin-gjs-html-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
}

.subin-gjs-html-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 15, 25, 0.72);
}

.subin-gjs-html-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(1040px, 96vw);
	max-height: min(820px, 92vh);
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.subin-gjs-html-modal__header,
.subin-gjs-html-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid #dcdcde;
}

.subin-gjs-html-modal__footer {
	justify-content: flex-end;
	border-top: 1px solid #dcdcde;
	border-bottom: 0;
	background: #f6f7f7;
}

.subin-gjs-html-modal__header h2 {
	margin: 0;
	font-size: 18px;
	line-height: 1.25;
}

.subin-gjs-html-modal__close {
	color: #50575e;
	font-size: 28px;
	line-height: 1;
	text-decoration: none;
}

.subin-gjs-html-modal__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 18px;
}

.subin-gjs-html-modal__body .wp-editor-wrap {
	max-width: none;
}

.subin-gjs-html-modal__body textarea.wp-editor-area {
	min-height: 420px;
	font-family: Consolas, Monaco, monospace;
	font-size: 13px;
	line-height: 1.5;
}

body.subin-gjs-html-modal-open {
	overflow: hidden;
}

/* Center the canvas workspace between the block panel and the right Inspector. */
.subin-admin-page:has(.subin-form-editor--design-studio) {
	max-width: none;
}

.subin-form-editor--design-studio .subin-form-editor__body,
.subin-form-editor--design-studio .subin-form-editor__main {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.subin-design-studio-panel {
	width: 100%;
	max-width: none;
	margin-right: 0;
	overflow: hidden;
}

.subin-design-studio--grapesjs-shell {
	width: 100%;
	max-width: none;
}

.subin-grapesjs-editor {
	--gjs-left-width: 286px;
	--subin-gjs-inspector-width: 360px;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.subin-grapesjs-editor .gjs-pn-views,
.subin-grapesjs-editor .gjs-pn-views-container {
	width: var(--subin-gjs-inspector-width);
}

.subin-grapesjs-editor .gjs-cv-canvas {
	left: 0;
	right: var(--subin-gjs-inspector-width);
	width: auto;
	display: flex;
	justify-content: center;
	align-items: stretch;
	overflow: hidden;
}

.subin-grapesjs-editor .gjs-pn-options {
	right: var(--subin-gjs-inspector-width);
	z-index: 5;
}

.subin-grapesjs-editor .gjs-cv-canvas__frames,
.subin-grapesjs-editor .gjs-frame-wrapper {
	margin-right: auto;
	margin-left: auto;
}

.subin-grapesjs-editor .gjs-frame-wrapper {
	max-width: min(100%, 1120px);
	background-color: #f4f7fb;
	background-image:
		linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
	background-size: 24px 24px;
}

.subin-grapesjs-editor .gjs-pn-views-container {
	height: 100%;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.subin-grapesjs-editor .gjs-pn-views-container > * {
	max-width: 100%;
}

.subin-grapesjs-editor .subin-gjs-unified-inspector {
	min-height: 100%;
	height: auto;
	max-height: none;
	overflow: visible;
}

/* Inspector helpers used by the current custom inspector renderer. */
.subin-grapesjs-editor .subin-gjs-inspector__note {
	margin: 0;
	color: var(--subin-studio-muted);
	font-size: 12px;
	line-height: 1.45;
}

/* Approved custom Design Studio Inspector. This is the visual source of truth. */
.subin-form-editor--design-studio {
	--subin-studio-bg-page: #eef3f8;
	--subin-studio-bg-shell: #ffffff;
	--subin-studio-bg-canvas: #f5f8fc;
	--subin-studio-bg-card: #ffffff;
	--subin-studio-bg-soft: #f8fafc;
	--subin-studio-bg-soft-blue: #eff6ff;
	--subin-studio-border: #d8e2ee;
	--subin-studio-border-strong: #b9c8da;
	--subin-studio-text: #172033;
	--subin-studio-muted: #64748b;
	--subin-studio-muted-soft: #94a3b8;
	--subin-studio-primary: #2563eb;
	--subin-studio-primary-hover: #1d4ed8;
	--subin-studio-primary-soft: #dbeafe;
	--subin-studio-success: #16a34a;
	--subin-studio-danger: #dc2626;
	--subin-studio-warning: #d97706;
	--subin-studio-radius-sm: 8px;
	--subin-studio-radius-md: 12px;
	--subin-studio-radius-lg: 18px;
	--subin-studio-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--subin-studio-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
	color: var(--subin-studio-text);
}

.subin-form-editor--design-studio * {
	box-sizing: border-box;
}

.subin-design-studio-panel {
	overflow: hidden;
	border: 1px solid var(--subin-studio-border);
	border-radius: 18px;
	background: var(--subin-studio-bg-shell);
	box-shadow: var(--subin-studio-shadow-md);
}

.subin-design-studio--grapesjs-shell {
	overflow: hidden;
	background: var(--subin-studio-bg-shell);
}

.subin-design-studio__toolbar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	min-height: 72px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #fff;
	box-shadow: none;
}

.subin-design-toolbar__left,
.subin-design-toolbar__center,
.subin-design-toolbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.subin-design-toolbar__right {
	justify-content: flex-end;
}

.subin-design-studio__toolbar .button,
.subin-gjs-preview-state-button.button {
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid var(--subin-studio-border-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--subin-studio-text);
	font-weight: 750;
	box-shadow: none;
	cursor: pointer;
}

.subin-design-studio__toolbar .button:hover,
.subin-design-studio__toolbar .button:focus,
.subin-gjs-preview-state-button.button:hover,
.subin-gjs-preview-state-button.button:focus {
	border-color: var(--subin-studio-primary);
	color: var(--subin-studio-primary);
	background: #fff;
	box-shadow: none;
}

.subin-design-studio__toolbar .button-primary,
.subin-design-studio__toolbar .button.button-primary,
.subin-gjs-preview-state-button.is-active.button {
	background: var(--subin-studio-primary);
	border-color: var(--subin-studio-primary);
	color: #fff;
}

.subin-design-studio__toolbar .button-primary:hover,
.subin-design-studio__toolbar .button-primary:focus,
.subin-design-studio__toolbar .button.button-primary:hover,
.subin-design-studio__toolbar .button.button-primary:focus,
.subin-gjs-preview-state-button.is-active.button:hover,
.subin-gjs-preview-state-button.is-active.button:focus {
	background: var(--subin-studio-primary-hover);
	border-color: var(--subin-studio-primary-hover);
	color: #fff;
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].button {
	color: var(--subin-studio-danger);
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].button {
	color: var(--subin-studio-success);
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].is-active.button,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].is-active.button {
	background: var(--subin-studio-primary);
	border-color: var(--subin-studio-primary);
	color: #fff;
}

.subin-design-toolbar__identity h2 {
	font-size: 18px;
	font-weight: 850;
	color: var(--subin-studio-text);
}

.subin-status-badge,
.subin-design-toolbar__identity .subin-status-badge {
	padding: 6px 10px;
	border-radius: 999px;
	background: #dcfce7;
	color: #15803d;
	font-size: 13px;
	font-weight: 850;
}

.subin-design-toolbar__shortcode .subin-shortcode-pill {
	padding: 9px 14px;
	border: 1px solid var(--subin-studio-border);
	border-radius: 10px;
	background: var(--subin-studio-bg-soft);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #334155;
	white-space: nowrap;
}

.subin-grapesjs-editor .gjs-cv-canvas,
.subin-grapesjs-editor .gjs-frame-wrapper {
	background:
		linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
		var(--subin-studio-bg-canvas);
	background-size: 28px 28px;
}

.subin-grapesjs-editor .gjs-frame-wrapper {
	padding: 0;
}

.subin-grapesjs-editor .gjs-toolbar {
	position: absolute;
	z-index: 10;
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 10px;
	background: #0f172a;
	color: #fff;
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22);
}

.subin-grapesjs-editor .gjs-toolbar-item {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

.subin-grapesjs-editor .gjs-toolbar-item:hover {
	background: rgba(255, 255, 255, 0.12);
}

.subin-grapesjs-editor .gjs-selected,
.subin-grapesjs-editor .gjs-selected-parent {
	outline: 2px solid var(--subin-studio-primary) !important;
	outline-offset: 4px !important;
	border-radius: 10px;
	background: rgba(37, 99, 235, 0.035) !important;
	box-shadow: none !important;
}

.subin-grapesjs-editor .gjs-hovered,
.subin-grapesjs-editor .gjs-highlighter {
	background: transparent !important;
	border-color: rgba(37, 99, 235, 0.35) !important;
	outline: 1px dashed rgba(37, 99, 235, 0.35) !important;
	box-shadow: none !important;
}

.subin-grapesjs-editor .gjs-placeholder {
	align-items: center;
	color: var(--subin-studio-muted);
	background: rgba(37, 99, 235, 0.05) !important;
	border-color: rgba(37, 99, 235, 0.35) !important;
	font-weight: 750;
}

.subin-studio-inspector {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-left: 1px solid var(--subin-studio-border);
	background: #fff;
}

.subin-inspector-head {
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #fff;
}

.subin-inspector-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 900;
	color: var(--subin-studio-text);
}

.subin-inspector-selected {
	color: var(--subin-studio-muted);
	font-size: 13px;
	font-weight: 750;
}

.subin-inspector-scroll {
	overflow: auto;
	padding: 16px;
}

.subin-inspector-section {
	margin-bottom: 14px;
	border: 1px solid var(--subin-studio-border);
	border-radius: 14px;
	background: var(--subin-studio-bg-soft);
	overflow: hidden;
}

.subin-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #fff;
}

.subin-section-title {
	font-size: 14px;
	font-weight: 900;
	color: #223047;
}

.subin-section-meta {
	color: var(--subin-studio-muted);
	font-size: 12px;
	font-weight: 800;
}

.subin-section-body {
	padding: 14px;
	background: var(--subin-studio-bg-soft);
}

.subin-control {
	margin-bottom: 14px;
}

.subin-control:last-child {
	margin-bottom: 0;
}

.subin-control-spaced {
	margin-top: 12px;
}

.subin-control-label {
	display: block;
	margin-bottom: 7px;
	color: #334155;
	font-size: 13px;
	font-weight: 850;
}

.subin-control-hint {
	margin-top: 6px;
	color: var(--subin-studio-muted);
	font-size: 12px;
	line-height: 1.4;
}

.subin-input,
.subin-textarea,
.subin-select {
	width: 100%;
	min-height: 40px;
	padding: 9px 11px;
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	background: #fff;
	color: var(--subin-studio-text);
	font-size: 14px;
	outline: none;
	box-shadow: none;
}

.subin-textarea {
	min-height: 92px;
	resize: vertical;
	line-height: 1.45;
}

.subin-textarea.is-code,
.subin-textarea.subin-gjs-inspector__html {
	min-height: 190px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.subin-input:focus,
.subin-textarea:focus,
.subin-select:focus {
	border-color: var(--subin-studio-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.subin-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 4px 0;
}

.subin-toggle-label {
	font-size: 13px;
	font-weight: 850;
	color: #334155;
}

.subin-switch {
	position: relative;
	display: inline-flex;
	width: 42px;
	height: 24px;
	flex: 0 0 auto;
}

.subin-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.subin-switch span {
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: #cbd5e1;
	transition: background 0.15s ease;
}

.subin-switch span::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}

.subin-switch input:checked + span {
	background: var(--subin-studio-primary);
}

.subin-switch input:checked + span::after {
	transform: translateX(18px);
}

.subin-part-tabs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
	gap: 6px;
	padding: 4px;
	border: 1px solid var(--subin-studio-border);
	border-radius: 10px;
	background: #edf2f7;
}

.subin-part-tab {
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--subin-studio-muted);
	padding: 8px 5px;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.subin-part-tab.is-active {
	background: #fff;
	color: var(--subin-studio-primary);
	box-shadow: var(--subin-studio-shadow-sm);
}

.subin-style-part-pane {
	display: none;
}

.subin-style-part-pane.is-active {
	display: block;
}

.subin-style-part-pane .subin-control:last-child {
	margin-bottom: 0;
}

.subin-style-part-hint {
	margin: 0 0 12px;
	padding: 9px 10px;
	border: 1px solid var(--subin-studio-border);
	border-radius: 9px;
	background: #fff;
}

.subin-color-control {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 42px;
	gap: 8px;
}

.subin-swatch {
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	min-height: 40px;
	cursor: pointer;
}

.subin-color-native {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42px;
	height: 40px;
	opacity: 0;
	pointer-events: none;
}

.subin-two-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.subin-unit {
	position: relative;
}

.subin-unit .subin-input {
	padding-right: 34px;
}

.subin-unit span {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	color: var(--subin-studio-muted);
	font-size: 12px;
	font-weight: 850;
}

.subin-option-card {
	padding: 12px;
	margin-bottom: 10px;
	border: 1px solid var(--subin-studio-border);
	border-radius: 12px;
	background: #fff;
}

.subin-option-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.subin-mini-btn {
	min-height: 32px;
	padding: 6px 10px;
	border: 1px solid var(--subin-studio-border-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--subin-studio-text);
	font-weight: 750;
	font-size: 12px;
	cursor: pointer;
}

.subin-mini-btn.is-danger {
	color: var(--subin-studio-danger);
	border-color: rgba(220, 38, 38, 0.35);
}

.subin-advanced-note {
	padding: 10px 12px;
	border-radius: 10px;
	background: #fff7ed;
	color: #9a3412;
	font-size: 12px;
	line-height: 1.45;
}

.subin-studio-inspector .gjs-traits-c,
.subin-studio-inspector .gjs-sm-sectors,
.subin-studio-inspector .gjs-clm-tags,
.subin-studio-inspector .gjs-clm-sels,
.subin-studio-inspector .gjs-clm-header,
.subin-studio-inspector .gjs-clm-label,
.subin-studio-inspector .gjs-clm-field,
.subin-studio-inspector .gjs-clm-tag {
	display: none !important;
}

/* Keep GrapesJS panel button menus predictable inside the approved studio shell. */
.subin-grapesjs-editor .gjs-pn-panel .gjs-pn-buttons {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	min-width: 0;
}

.subin-grapesjs-editor .gjs-pn-options .gjs-pn-buttons,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-buttons {
	justify-content: flex-end;
}

.subin-grapesjs-editor .gjs-pn-commands .gjs-pn-buttons,
.subin-grapesjs-editor .gjs-pn-devices-c .gjs-pn-buttons {
	justify-content: center;
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-buttons {
	padding-right: 8px;
}

/* Keep the native GrapesJS selected-element toolbar usable above the canvas. */
.subin-grapesjs-editor .gjs-cv-canvas {
	overflow: visible !important;
}

.subin-grapesjs-editor .gjs-tools,
.subin-grapesjs-editor .gjs-toolbar {
	z-index: 1000 !important;
	pointer-events: auto;
}

.subin-grapesjs-editor .gjs-toolbar {
	position: absolute !important;
	display: inline-flex !important;
	align-items: center;
	gap: 2px;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 4px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: #0f172a !important;
	color: #fff !important;
	box-shadow: 0 10px 20px rgba(15, 23, 42, 0.22) !important;
	line-height: 1 !important;
}

.subin-grapesjs-editor .gjs-toolbar-item {
	display: inline-grid !important;
	place-items: center;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 7px !important;
	background: transparent !important;
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1 !important;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.subin-grapesjs-editor .gjs-toolbar-item > *,
.subin-grapesjs-editor .gjs-toolbar-item svg {
	display: inline-block !important;
	opacity: 1 !important;
	color: #fff !important;
	fill: currentColor !important;
	stroke: currentColor !important;
	visibility: visible !important;
}

.subin-grapesjs-editor .gjs-toolbar-item svg {
	width: 15px !important;
	height: 15px !important;
}

.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-move"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Move"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Drag"]::before {
	content: "\2195";
}

.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-clone"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-copy"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Clone"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Duplicate"]::before {
	content: "\2398";
}

.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-delete"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Delete"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Remove"]::before {
	content: "\00d7";
}

.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-select-parent"]::before,
.subin-grapesjs-editor .gjs-toolbar-item[title*="Select parent"]::before {
	content: "\2191";
}

.subin-grapesjs-editor .gjs-toolbar-item::before {
	display: inline-grid;
	place-items: center;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
}

.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-move"] > *,
.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-clone"] > *,
.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-copy"] > *,
.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-delete"] > *,
.subin-grapesjs-editor .gjs-toolbar-item[data-command="tlb-select-parent"] > * {
	display: none !important;
}

.subin-grapesjs-editor .gjs-toolbar-item:hover,
.subin-grapesjs-editor .gjs-toolbar-item:focus {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: none;
}

/* Auto-reply visual alignment for the Form Design Studio shell. */
.subin-admin-page:has(.subin-form-editor--design-studio) {
	max-width: none;
	margin-right: 20px;
}

.subin-form-editor--design-studio {
	--subin-studio-workspace-height: clamp(720px, calc(100vh - 220px), 860px);
	--subin-studio-bg-page: #eef3f8;
	--subin-studio-bg-shell: #ffffff;
	--subin-studio-bg-canvas: #eef3f8;
	--subin-studio-bg-soft: #f8fafc;
	--subin-studio-border: #d8e2ee;
	--subin-studio-border-strong: #b9c8da;
	--subin-studio-text: #172033;
	--subin-studio-muted: #64748b;
	--subin-studio-primary: #2563eb;
	--subin-studio-primary-hover: #1d4ed8;
	--subin-studio-primary-soft: #eff6ff;
	--subin-studio-radius-sm: 10px;
	--subin-studio-radius-md: 12px;
	--subin-studio-radius-lg: 16px;
	--subin-studio-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--subin-studio-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.subin-form-editor--design-studio .subin-form-editor__body,
.subin-form-editor--design-studio .subin-form-editor__main {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.subin-design-studio-panel {
	width: 100%;
	max-width: none;
	margin-right: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.subin-design-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin: 0 0 10px;
	color: var(--subin-studio-muted);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.3;
	text-decoration: none;
}

.subin-design-back-link::before {
	content: "\2190";
	font-size: 14px;
	line-height: 1;
}

.subin-design-back-link:hover,
.subin-design-back-link:focus {
	color: var(--subin-studio-primary);
	text-decoration: underline;
	outline: none;
}

.subin-design-studio--grapesjs-shell {
	min-height: 0;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-lg);
	background: var(--subin-studio-bg-shell);
	box-shadow: var(--subin-studio-shadow-md);
}

.subin-design-studio__toolbar {
	grid-template-columns: minmax(280px, 1fr) auto minmax(320px, 1fr);
	align-items: center;
	gap: 16px;
	min-height: 76px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #ffffff;
}

.subin-design-toolbar__left,
.subin-design-toolbar__center,
.subin-design-toolbar__right,
.subin-design-toolbar__shortcode {
	gap: 10px;
}

.subin-design-toolbar__identity h2 {
	max-width: 320px;
	font-size: 17px;
	font-weight: 850;
	color: var(--subin-studio-text);
}

.subin-design-studio__toolbar .button,
.subin-gjs-preview-state-button.button {
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid var(--subin-studio-border-strong);
	border-radius: var(--subin-studio-radius-sm);
	background: #ffffff;
	color: var(--subin-studio-text);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	box-shadow: none;
}

.subin-design-studio__toolbar .button:hover,
.subin-design-studio__toolbar .button:focus,
.subin-gjs-preview-state-button.button:hover,
.subin-gjs-preview-state-button.button:focus {
	border-color: var(--subin-studio-primary);
	background: var(--subin-studio-primary-soft);
	color: var(--subin-studio-primary);
	outline: none;
}

.subin-design-studio__toolbar .button-primary,
.subin-design-studio__toolbar .button.button-primary,
.subin-gjs-preview-state-button.is-active.button {
	border-color: var(--subin-studio-primary);
	background: var(--subin-studio-primary);
	color: #ffffff;
}

.subin-design-studio__toolbar .button-primary:hover,
.subin-design-studio__toolbar .button-primary:focus,
.subin-design-studio__toolbar .button.button-primary:hover,
.subin-design-studio__toolbar .button.button-primary:focus,
.subin-gjs-preview-state-button.is-active.button:hover,
.subin-gjs-preview-state-button.is-active.button:focus {
	border-color: var(--subin-studio-primary-hover);
	background: var(--subin-studio-primary-hover);
	color: #ffffff;
}

.subin-gjs-preview-state-switcher {
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-md);
	background: var(--subin-studio-bg-soft);
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].button,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].button {
	color: var(--subin-studio-muted);
}

.subin-gjs-preview-state-button[data-subin-gjs-preview-state="error"].is-active.button,
.subin-gjs-preview-state-button[data-subin-gjs-preview-state="success"].is-active.button {
	border-color: var(--subin-studio-primary);
	background: var(--subin-studio-primary);
	color: #ffffff;
}

.subin-design-toolbar__shortcode .subin-shortcode-pill {
	max-width: clamp(180px, 20vw, 300px);
	padding: 9px 14px;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-sm);
	background: var(--subin-studio-bg-soft);
	color: #334155;
	font-size: 12px;
}

.subin-grapesjs-save-status {
	min-width: 72px;
	color: #15803d;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

.subin-grapesjs-editor {
	height: var(--subin-studio-workspace-height) !important;
	min-height: var(--subin-studio-workspace-height);
	background: var(--subin-studio-bg-canvas);
	border-top: 0;
}

.subin-grapesjs-editor .gjs-one-bg,
.subin-grapesjs-editor .gjs-pn-panels,
.subin-grapesjs-editor .gjs-pn-panel,
.subin-grapesjs-editor .gjs-pn-views-container {
	background: #ffffff;
	border-color: var(--subin-studio-border);
	box-shadow: none;
}

.subin-grapesjs-editor .gjs-two-color {
	color: var(--subin-studio-text);
}

.subin-grapesjs-editor .gjs-three-bg {
	background: var(--subin-studio-primary);
}

.subin-grapesjs-editor .gjs-pn-btn {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	min-height: 34px;
	margin: 2px;
	border: 1px solid transparent;
	border-radius: var(--subin-studio-radius-sm);
	background: transparent;
	color: var(--subin-studio-muted);
	box-shadow: none;
}

.subin-grapesjs-editor .gjs-pn-btn:hover,
.subin-grapesjs-editor .gjs-pn-btn:focus,
.subin-grapesjs-editor .gjs-pn-btn.gjs-pn-active,
.subin-grapesjs-editor .gjs-pn-btn.gjs-four-color {
	border-color: transparent;
	background: var(--subin-studio-primary-soft);
	color: var(--subin-studio-primary);
	box-shadow: none;
	outline: none;
}

.subin-grapesjs-editor .gjs-cv-canvas {
	right: var(--subin-gjs-inspector-width);
	background-color: var(--subin-studio-bg-canvas);
	background-image:
		linear-gradient(rgba(34, 113, 177, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34, 113, 177, 0.05) 1px, transparent 1px);
	background-size: 24px 24px;
}

.subin-grapesjs-editor .gjs-frame-wrapper {
	max-width: min(100%, 1120px);
	background: transparent;
	background-image: none;
}

.subin-grapesjs-editor .gjs-pn-views {
	width: var(--subin-gjs-inspector-width);
	border-left: 1px solid var(--subin-studio-border);
	background: var(--subin-studio-bg-soft);
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	width: 100%;
	padding: 0;
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 10px 10px;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	background: var(--subin-studio-bg-soft);
	color: var(--subin-studio-muted);
	font-size: 0;
	font-weight: 800;
	text-align: center;
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn::before {
	display: none;
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn::after {
	font-size: 13px;
	line-height: 1.2;
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn[data-subin-right-panel="inspector"]::after {
	content: "Inspector";
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn[data-subin-right-panel="blocks"]::after {
	content: "Form";
}

.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn:hover,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn:focus,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn.gjs-pn-active,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn.gjs-four-color,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn.subin-right-panel-tab--active,
.subin-grapesjs-editor .gjs-pn-views .gjs-pn-btn[aria-pressed="true"] {
	border-bottom-color: var(--subin-studio-primary);
	background: #ffffff;
	color: var(--subin-studio-text);
	box-shadow: inset 0 -1px 0 #ffffff, 0 8px 18px rgba(15, 23, 42, 0.08);
}

.subin-grapesjs-editor .gjs-pn-views-container {
	width: var(--subin-gjs-inspector-width);
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	border-left: 1px solid var(--subin-studio-border);
	background: #ffffff;
	color: var(--subin-studio-text);
}

.subin-grapesjs-editor .gjs-blocks-cs,
.subin-grapesjs-editor .gjs-block-categories {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	color: var(--subin-studio-text) !important;
	box-shadow: none !important;
}

.subin-grapesjs-editor .gjs-block-categories {
	padding: 10px 18px 18px !important;
}

.subin-grapesjs-editor .gjs-block-category,
.subin-grapesjs-editor .gjs-block-category.gjs-open,
.subin-grapesjs-editor .gjs-category {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.subin-grapesjs-editor .gjs-block-category > .gjs-title,
.subin-grapesjs-editor .gjs-block-category .gjs-title,
.subin-grapesjs-editor .gjs-block-category > .gjs-category-title,
.subin-grapesjs-editor .gjs-category-title {
	margin: 0 !important;
	padding: 14px 2px 8px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--subin-studio-muted) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

.subin-grapesjs-editor .gjs-caret-icon,
.subin-grapesjs-editor .gjs-block-category .gjs-caret-icon {
	display: none !important;
}

.subin-grapesjs-editor .gjs-blocks-c {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	padding: 8px 0 0;
	background: #ffffff;
}

.subin-grapesjs-editor .gjs-block {
	width: 100%;
	min-height: 72px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-md);
	background: #ffffff;
	box-shadow: var(--subin-studio-shadow-sm);
	color: var(--subin-studio-text);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.subin-grapesjs-editor .gjs-block:hover,
.subin-grapesjs-editor .gjs-block:focus {
	border-color: var(--subin-studio-primary);
	background: var(--subin-studio-primary-soft);
	box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12);
	transform: translateY(-1px);
}

.subin-grapesjs-editor .gjs-block-label {
	display: block;
	width: 100%;
	padding: 0;
	font-family: inherit;
}

.subin-grapesjs-editor .gjs-block__media {
	display: none;
}

.subin-grapesjs-editor .subin-gjs-block-label {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px;
	text-align: left;
}

.subin-grapesjs-editor .subin-gjs-block-label__icon {
	width: 42px;
	height: 42px;
	border: 1px solid #cfe0f1;
	border-radius: var(--subin-studio-radius-sm);
	background: var(--subin-studio-primary-soft);
	color: var(--subin-studio-primary);
	font-size: 11px;
	font-weight: 800;
}

.subin-grapesjs-editor .subin-gjs-block-label__copy {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.subin-grapesjs-editor .subin-gjs-block-label__copy strong {
	overflow: hidden;
	color: var(--subin-studio-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.subin-grapesjs-editor .subin-gjs-block-label__copy small {
	color: var(--subin-studio-muted);
	font-size: 12px;
	line-height: 1.35;
	white-space: normal;
}

.subin-studio-inspector {
	border-left: 0;
	background: #ffffff;
	color: var(--subin-studio-text);
}

.subin-inspector-head {
	padding: 18px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #ffffff;
}

.subin-inspector-title {
	font-size: 16px;
	font-weight: 850;
}

.subin-inspector-selected {
	color: var(--subin-studio-muted);
	font-size: 13px;
	font-weight: 650;
}

.subin-inspector-scroll {
	padding: 18px;
	background: #ffffff;
}

.subin-inspector-section {
	margin-bottom: 16px;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-md);
	background: #ffffff;
	box-shadow: var(--subin-studio-shadow-sm);
}

.subin-section-header {
	padding: 13px 14px;
	border-bottom: 1px solid #e5edf6;
	background: #ffffff;
}

.subin-section-title {
	color: var(--subin-studio-text);
	font-size: 15px;
	font-weight: 850;
}

.subin-section-meta {
	color: var(--subin-studio-muted);
	font-size: 12px;
	font-weight: 800;
}

.subin-section-body {
	display: grid;
	gap: 12px;
	padding: 14px;
	background: var(--subin-studio-bg-soft);
}

.subin-control {
	margin-bottom: 0;
}

.subin-control-label,
.subin-toggle-label {
	color: var(--subin-studio-text);
	font-size: 12px;
	font-weight: 750;
}

.subin-input,
.subin-textarea,
.subin-select {
	min-height: 38px;
	border-color: #cbd5e1;
	border-radius: var(--subin-studio-radius-sm);
	color: var(--subin-studio-text);
	font-size: 13px;
}

.subin-input:focus,
.subin-textarea:focus,
.subin-select:focus {
	border-color: var(--subin-studio-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: 2px solid transparent;
}

.subin-option-card,
.subin-style-part-hint {
	border-color: var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-md);
	background: #ffffff;
}

.subin-mini-btn,
.subin-gjs-inspector__button.button {
	min-height: 34px;
	border-color: #cbd5e1;
	border-radius: var(--subin-studio-radius-sm);
	background: #ffffff;
	color: var(--subin-studio-text);
	font-weight: 800;
	box-shadow: none;
}

.subin-mini-btn:hover,
.subin-mini-btn:focus,
.subin-gjs-inspector__button.button:hover,
.subin-gjs-inspector__button.button:focus {
	border-color: var(--subin-studio-primary);
	background: var(--subin-studio-primary-soft);
	color: var(--subin-studio-primary);
	outline: none;
}

.subin-grapesjs-editor .gjs-clm-tags,
.subin-grapesjs-editor .gjs-clm-sels,
.subin-grapesjs-editor .gjs-clm-header,
.subin-grapesjs-editor .gjs-clm-label,
.subin-grapesjs-editor .gjs-clm-field,
.subin-grapesjs-editor .gjs-clm-tag,
.subin-grapesjs-editor .gjs-sm-header {
	display: none !important;
}

/* Keep the custom inspector aligned with the current light Design Studio surface. */
.subin-grapesjs-editor .subin-studio-inspector,
.subin-grapesjs-editor .subin-gjs-unified-inspector.subin-studio-inspector {
	background: #ffffff;
	color: var(--subin-studio-text);
}

.subin-grapesjs-editor .subin-studio-inspector .subin-inspector-head,
.subin-grapesjs-editor .subin-gjs-unified-inspector .subin-inspector-head,
.subin-grapesjs-editor .subin-gjs-unified-inspector__header {
	padding: 18px;
	border-bottom: 1px solid var(--subin-studio-border);
	background: #ffffff;
	color: var(--subin-studio-text);
}

.subin-grapesjs-editor .subin-studio-inspector .subin-inspector-title {
	margin: 0 0 4px;
	color: var(--subin-studio-text);
	font-size: 16px;
	font-weight: 850;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-inspector-selected,
.subin-grapesjs-editor .subin-gjs-unified-inspector__selected {
	color: var(--subin-studio-muted);
	font-size: 13px;
	font-weight: 650;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-inspector-scroll {
	padding: 18px;
	background: #ffffff;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-inspector-section {
	margin: 0 0 16px;
	border: 1px solid var(--subin-studio-border);
	border-radius: var(--subin-studio-radius-md);
	background: #ffffff;
	box-shadow: var(--subin-studio-shadow-sm);
}

.subin-grapesjs-editor .subin-studio-inspector .subin-section-header {
	padding: 13px 14px;
	border-bottom: 1px solid #e5edf6;
	background: #ffffff;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-section-title {
	color: var(--subin-studio-text);
	font-size: 15px;
	font-weight: 850;
	line-height: 1.25;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-section-meta {
	color: var(--subin-studio-muted);
	font-size: 12px;
	font-weight: 800;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-section-body {
	display: grid;
	gap: 12px;
	padding: 14px;
	background: var(--subin-studio-bg-soft);
}

.subin-grapesjs-editor .subin-studio-inspector .subin-control {
	margin-bottom: 0;
}

.subin-grapesjs-editor .subin-studio-inspector .subin-control-label,
.subin-grapesjs-editor .subin-studio-inspector .subin-toggle-label {
	margin-bottom: 7px;
	color: var(--subin-studio-text);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.3;
}

.subin-grapesjs-editor .subin-studio-inspector input.subin-input:not([type="checkbox"]):not([type="radio"]),
.subin-grapesjs-editor .subin-studio-inspector textarea.subin-textarea,
.subin-grapesjs-editor .subin-studio-inspector select.subin-select {
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid #cbd5e1;
	border-radius: var(--subin-studio-radius-sm);
	background: #ffffff;
	color: var(--subin-studio-text);
	font-size: 13px;
	line-height: 1.35;
	box-shadow: none;
}

.subin-grapesjs-editor .subin-studio-inspector textarea.subin-textarea {
	min-height: 92px;
	resize: vertical;
}

.subin-grapesjs-editor .subin-studio-inspector input.subin-input:focus,
.subin-grapesjs-editor .subin-studio-inspector textarea.subin-textarea:focus,
.subin-grapesjs-editor .subin-studio-inspector select.subin-select:focus {
	border-color: var(--subin-studio-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	outline: 2px solid transparent;
}

@media (max-width: 1280px) {
	.subin-design-studio__toolbar {
		grid-template-columns: minmax(180px, 1fr) auto minmax(260px, 1fr);
		gap: 8px;
	}

	.subin-design-toolbar__identity h2 {
		max-width: 190px;
	}

	.subin-grapesjs-editor {
		--subin-gjs-inspector-width: 340px;
	}
}

@media (max-width: 960px) {
	.subin-design-studio__toolbar {
		grid-template-columns: 1fr;
	}

	.subin-design-toolbar__center {
		justify-content: flex-start;
	}

	.subin-design-toolbar__right {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.subin-design-toolbar__shortcode .subin-shortcode-pill {
		max-width: min(280px, 58vw);
	}

	.subin-design-studio-panel {
		width: auto;
		margin-right: 0;
	}

	.subin-grapesjs-editor {
		--subin-gjs-inspector-width: 300px;
	}
}


@media (max-width: 900px) {
	.subin-design-studio {
		grid-template-columns: 1fr;
	}
}
