.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;
	}
}

/* Design Studio product shell v2. Final scoped layer. */
.subin-form-editor-page:has(.subin-studio-shell-v2) > .subin-admin-hero,
.subin-form-editor--design-studio > .subin-editor-tabs { display: none; }
.subin-admin-page:has(.subin-studio-shell-v2) { width: auto; max-width: none; margin: 12px 20px 0 0; }
.subin-studio-shell-v2 {
	--v2-bg:#f3f6fa; --v2-surface:#fff; --v2-soft:#f8fafc; --v2-border:#dce4ee;
	--v2-strong:#c6d1df; --v2-text:#172033; --v2-muted:#64748b; --v2-primary:#2563eb;
	--v2-primary-soft:#eff6ff; --v2-height:clamp(680px,calc(100vh - 104px),960px);
	position:relative; overflow:hidden; width:100%; margin:0; padding:0; border:1px solid var(--v2-border);
	border-radius:14px; background:#fff; color:var(--v2-text); box-shadow:0 12px 36px rgba(15,23,42,.08);
}
.subin-studio-shell-v2 *, .subin-studio-shell-v2 *::before, .subin-studio-shell-v2 *::after { box-sizing:border-box; }
.subin-studio-shell-v2 .subin-design-studio--grapesjs-shell { overflow:hidden; border:0; border-radius:0; box-shadow:none; }
.subin-studio-shell-v2 .subin-design-studio__toolbar {
	display:grid; grid-template-columns:minmax(260px,1fr) auto minmax(350px,1fr); align-items:center;
	gap:18px; min-height:68px; padding:10px 16px; border:0; border-bottom:1px solid var(--v2-border); background:#fff;
}
.subin-studio-shell-v2 .subin-design-toolbar__left,
.subin-studio-shell-v2 .subin-design-toolbar__center,
.subin-studio-shell-v2 .subin-design-toolbar__right,
.subin-studio-shell-v2 .subin-design-toolbar__identity,
.subin-studio-shell-v2 .subin-studio-history-actions { display:flex; align-items:center; min-width:0; }
.subin-studio-shell-v2 .subin-design-toolbar__left,
.subin-studio-shell-v2 .subin-design-toolbar__right { gap:10px; }
.subin-studio-shell-v2 .subin-design-toolbar__center { justify-content:center; gap:7px; max-width:250px; color:var(--v2-muted); }
.subin-studio-shell-v2 .subin-design-toolbar__right { justify-content:flex-end; }
.subin-studio-shell-v2 .subin-design-toolbar__identity { gap:10px; }
.subin-studio-shell-v2 .subin-design-toolbar__identity > div { min-width:0; }
.subin-studio-shell-v2 .subin-design-toolbar__identity h2 {
	overflow:hidden; max-width:300px; margin:1px 0 0; color:var(--v2-text); font-size:16px;
	font-weight:760; line-height:1.2; text-overflow:ellipsis; white-space:nowrap;
}
.subin-studio-shell-v2 .subin-studio-eyebrow {
	display:block; color:var(--v2-muted); font-size:10px; font-weight:750; line-height:1.2;
	letter-spacing:.08em; text-transform:uppercase;
}
.subin-studio-shell-v2 .subin-status-badge { flex:none; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:750; }
.subin-studio-shell-v2 .subin-design-back-link,
.subin-studio-shell-v2 .subin-studio-icon-button {
	display:inline-grid; flex:none; place-items:center; width:36px; height:36px; min-width:36px; margin:0; padding:0;
	border:1px solid var(--v2-border); border-radius:9px; background:#fff; color:#475569; text-decoration:none; box-shadow:none; cursor:pointer;
}
.subin-studio-shell-v2 .subin-design-back-link::before { display:none; }
.subin-studio-shell-v2 .subin-studio-icon-button:hover,
.subin-studio-shell-v2 .subin-studio-icon-button:focus { border-color:#a9c8f7; background:var(--v2-primary-soft); color:var(--v2-primary); outline:0; }
.subin-studio-shell-v2 .subin-studio-icon-button:disabled { opacity:.4; cursor:default; }
.subin-studio-shell-v2 .subin-studio-history-actions { gap:3px; padding:3px; border:1px solid var(--v2-border); border-radius:11px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-studio-history-actions .subin-studio-icon-button { width:30px; height:30px; min-width:30px; border:0; background:transparent; }
.subin-studio-shell-v2 .subin-design-studio__toolbar .button,
.subin-studio-shell-v2 .subin-studio-preview-toolbar .button {
	display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 14px;
	border:1px solid var(--v2-strong); border-radius:9px; background:#fff; color:var(--v2-text); font-size:13px; font-weight:700; box-shadow:none;
}
.subin-studio-shell-v2 .subin-studio-button-icon {
	display:inline-grid;
	flex:0 0 18px;
	place-items:center;
	width:18px;
	height:18px;
	margin:0;
	font-size:18px;
	line-height:18px;
	vertical-align:middle;
}
.subin-studio-shell-v2 .subin-studio-button-icon::before {
	display:block;
	width:18px;
	height:18px;
	line-height:18px;
}
.subin-studio-shell-v2 .subin-design-studio__toolbar .button-primary { border-color:var(--v2-primary); background:var(--v2-primary); color:#fff; }
.subin-studio-shell-v2 [data-subin-studio-publish] { position:relative; }
.subin-studio-shell-v2 [data-subin-studio-publish].has-unpublished-changes::after {
	position:absolute; top:-4px; right:-4px; width:9px; height:9px; border:2px solid #fff;
	border-radius:50%; background:#f59e0b; content:"";
}
.subin-studio-shell-v2 .subin-studio-save-indicator { width:7px; height:7px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 3px #f1f5f9; }
.subin-studio-shell-v2 .subin-grapesjs-save-status {
	overflow:hidden; min-width:0; max-width:220px; color:var(--v2-muted); font-size:12px; font-weight:650;
	text-align:center; text-overflow:ellipsis; white-space:nowrap;
}
.subin-studio-shell-v2 .subin-grapesjs-save-status[data-subin-save-state="saved"] { color:#15803d; }
.subin-studio-shell-v2 .subin-grapesjs-save-status[data-subin-save-state="error"],
.subin-studio-shell-v2 .subin-grapesjs-save-status[data-subin-save-state="conflict"] { color:#b91c1c; }
.subin-studio-shell-v2 .subin-studio-preview-toolbar {
	display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; min-height:64px;
	padding:10px 16px; border-bottom:1px solid var(--v2-border); background:#fff;
}
.subin-studio-shell-v2 .subin-studio-preview-toolbar[hidden] { display:none; }
.subin-studio-shell-v2 .subin-studio-preview-toolbar__center { display:flex; justify-content:center; }
.subin-studio-shell-v2 .subin-studio-device-switcher { display:flex; justify-content:flex-end; gap:4px; }
.subin-studio-shell-v2 .subin-studio-device-button {
	display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 10px; border:1px solid transparent;
	border-radius:8px; background:transparent; color:var(--v2-muted); font-size:12px; font-weight:700; cursor:pointer;
}
.subin-studio-shell-v2 .subin-studio-device-button:hover,
.subin-studio-shell-v2 .subin-studio-device-button:focus,
.subin-studio-shell-v2 .subin-studio-device-button.is-active { border-color:#bfdbfe; background:var(--v2-primary-soft); color:var(--v2-primary); outline:0; }
.subin-studio-shell-v2 .subin-gjs-preview-state-switcher { display:flex; gap:3px; padding:3px; border:1px solid var(--v2-border); border-radius:10px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-gjs-preview-state-button.button { min-height:30px; padding:5px 10px; border:0; border-radius:7px; background:transparent; color:var(--v2-muted); font-size:12px; }
.subin-studio-shell-v2 .subin-gjs-preview-state-button.is-active.button { background:#fff; color:var(--v2-text); box-shadow:0 1px 3px rgba(15,23,42,.12); }

.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-row-actions-trait {
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:8px;
}
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-row-actions-trait .subin-mini-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:36px;
	line-height:1.25;
}
.subin-studio-shell-v2 .subin-studio-inspector [data-subin-row-action="delete-empty"] { grid-column:1 / -1; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-mini-btn:disabled {
	border-color:var(--v2-border);
	background:var(--v2-soft);
	color:#94a3b8;
	cursor:not-allowed;
	opacity:1;
}

.subin-studio-shell-v2 .subin-studio-workspace {
	position:relative; display:grid; grid-template-columns:328px minmax(0,1fr) 360px;
	height:var(--v2-height); min-height:680px; background:var(--v2-bg);
}
.subin-studio-shell-v2 .subin-studio-library { display:grid; grid-template-columns:68px minmax(0,260px); min-width:0; min-height:0; height:100%; overflow:hidden; border-right:1px solid var(--v2-border); background:#fff; }
.subin-studio-shell-v2 .subin-studio-rail { display:flex; flex-direction:column; gap:5px; padding:12px 7px; border-right:1px solid var(--v2-border); background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-studio-rail-button {
	position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
	min-height:56px; padding:7px 3px; border:1px solid transparent; border-radius:9px; background:transparent;
	color:var(--v2-muted); font-size:10px; font-weight:700; line-height:1.1; cursor:pointer;
}
.subin-studio-shell-v2 .subin-studio-rail-button:hover,
.subin-studio-shell-v2 .subin-studio-rail-button:focus,
.subin-studio-shell-v2 .subin-studio-rail-button.is-active { border-color:#c8dcfb; background:var(--v2-primary-soft); color:var(--v2-primary); outline:0; }
.subin-studio-shell-v2 .subin-studio-rail-button.is-active::before { position:absolute; top:10px; bottom:10px; left:-8px; width:3px; border-radius:3px; background:var(--v2-primary); content:""; }
.subin-studio-shell-v2 .subin-studio-rail-button em { padding:2px 4px; border-radius:99px; background:#e2e8f0; color:#64748b; font-size:8px; font-style:normal; text-transform:uppercase; }
.subin-studio-shell-v2 .subin-studio-library-drawer { min-width:0; min-height:0; height:100%; overflow:hidden; background:#fff; }
.subin-studio-shell-v2 .subin-studio-library-panel {
	height:100%;
	min-height:0;
	max-height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-gutter:stable;
	padding:18px 16px;
}
.subin-studio-shell-v2 .subin-studio-library-panel[hidden] { display:none; }
.subin-studio-shell-v2 .subin-studio-panel-heading { display:grid; gap:8px; margin-bottom:14px; }
.subin-studio-shell-v2 .subin-studio-panel-heading h3 { margin:2px 0 0; color:var(--v2-text); font-size:18px; font-weight:760; line-height:1.2; }
.subin-studio-shell-v2 .subin-studio-panel-heading p,
.subin-studio-shell-v2 .subin-studio-embed-card p,
.subin-studio-shell-v2 .subin-studio-coming-soon p { margin:0; color:var(--v2-muted); font-size:12px; line-height:1.45; }
.subin-studio-shell-v2 .subin-studio-search { position:relative; display:block; margin-bottom:12px; }
.subin-studio-shell-v2 .subin-studio-search .dashicons { position:absolute; top:10px; left:10px; z-index:1; color:#94a3b8; }
.subin-studio-shell-v2 .subin-studio-search input { width:100%; min-height:38px; padding:7px 10px 7px 34px; border:1px solid var(--v2-strong); border-radius:9px; background:var(--v2-soft); font-size:12px; box-shadow:none; }
.subin-studio-shell-v2 .subin-studio-blocks-host,
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-blocks-cs,
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-block-categories,
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-block-category { display:block; width:100%; margin:0; padding:0; border:0; background:transparent; color:var(--v2-text); box-shadow:none; }
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-title { padding:13px 1px 7px; border:0; background:transparent; color:var(--v2-muted); font-size:11px; font-weight:750; text-transform:uppercase; }
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-caret-icon { display:none; }
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-blocks-c { display:grid; grid-template-columns:1fr; gap:7px; padding:0; background:transparent; }
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-block { width:100%; min-height:58px; margin:0; padding:0; border:1px solid var(--v2-border); border-radius:9px; background:#fff; color:var(--v2-text); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.subin-studio-shell-v2 .subin-studio-blocks-host .gjs-block:hover { border-color:#93bdf7; background:var(--v2-primary-soft); transform:translateY(-1px); }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; padding:9px; text-align:left; }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__icon { display:grid; place-items:center; width:34px; height:34px; border:1px solid #c8dcfb; border-radius:8px; background:var(--v2-primary-soft); color:var(--v2-primary); font-size:10px; font-weight:800; }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__copy { display:grid; gap:2px; min-width:0; }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__copy strong,
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__copy strong { color:var(--v2-text); font-size:12px; }
.subin-studio-shell-v2 .subin-studio-blocks-host .subin-gjs-block-label__copy small { color:var(--v2-muted); font-size:10px; }
.subin-studio-shell-v2 .subin-studio-layers-host, .subin-studio-shell-v2 .subin-studio-layers-host * { background:transparent; color:var(--v2-text); }
.subin-studio-shell-v2 .subin-studio-layers-host .gjs-layer-title { min-height:34px; padding:7px 5px; border-bottom:1px solid #edf1f6; font-size:12px; }
.subin-studio-shell-v2 .subin-studio-jump-list { display:grid; gap:8px; }
.subin-studio-shell-v2 .subin-studio-jump-list > button,
.subin-studio-shell-v2 .subin-studio-jump-list > a {
	display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; width:100%; padding:11px;
	border:1px solid var(--v2-border); border-radius:10px; background:#fff; color:var(--v2-text); text-align:left; text-decoration:none; cursor:pointer;
}
.subin-studio-shell-v2 .subin-studio-jump-list > :hover { border-color:#93bdf7; background:var(--v2-primary-soft); }
.subin-studio-shell-v2 .subin-studio-jump-list > * > span:last-child { display:grid; gap:2px; }
.subin-studio-shell-v2 .subin-studio-jump-list strong { font-size:12px; }
.subin-studio-shell-v2 .subin-studio-jump-list small { color:var(--v2-muted); font-size:10px; line-height:1.35; }
.subin-studio-shell-v2 .subin-studio-embed-card,
.subin-studio-shell-v2 .subin-studio-coming-soon { display:grid; gap:10px; margin-top:16px; padding:14px; border:1px solid var(--v2-border); border-radius:11px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-studio-embed-card .subin-shortcode-pill { display:block; overflow:hidden; width:100%; padding:9px; border:1px solid var(--v2-border); border-radius:7px; background:#fff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }

.subin-studio-shell-v2 .subin-logic-toolbar { display:flex; justify-content:flex-end; margin-bottom:12px; }
.subin-studio-shell-v2 .subin-logic-toolbar .button { width:100%; min-height:36px; border-radius:8px; font-size:11px; font-weight:700; }
.subin-studio-shell-v2 .subin-logic-rules { display:grid; gap:12px; }
.subin-studio-shell-v2 .subin-logic-empty { margin-top:0; text-align:left; }
.subin-studio-shell-v2 .subin-logic-card { gap:12px; margin-top:0; padding:12px; background:#fff; }
.subin-studio-shell-v2 .subin-logic-card__header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; }
.subin-studio-shell-v2 .subin-logic-card__header strong { grid-column:1 / -1; grid-row:1; color:var(--v2-text); font-size:12px; }
.subin-studio-shell-v2 .subin-logic-card__header label { grid-column:1; grid-row:2; display:flex; align-items:center; gap:6px; color:var(--v2-muted); font-size:10px; }
.subin-studio-shell-v2 .subin-logic-card__header .button-link-delete { grid-column:2; grid-row:2; }
.subin-studio-shell-v2 .subin-logic-rule-line,
.subin-studio-shell-v2 .subin-logic-condition { display:grid; gap:8px; }
.subin-studio-shell-v2 .subin-logic-card label,
.subin-studio-shell-v2 .subin-logic-group__toolbar label { display:grid; gap:4px; min-width:0; color:var(--v2-muted); font-size:10px; font-weight:700; }
.subin-studio-shell-v2 .subin-logic-card select,
.subin-studio-shell-v2 .subin-logic-card input[type="text"],
.subin-studio-shell-v2 .subin-logic-card textarea { width:100%; min-height:34px; margin:0; padding:5px 8px; border:1px solid var(--v2-strong); border-radius:7px; background:#fff; color:var(--v2-text); font-size:11px; box-shadow:none; }
.subin-studio-shell-v2 .subin-logic-rule-line > .button,
.subin-studio-shell-v2 .subin-logic-card > .button,
.subin-studio-shell-v2 .subin-logic-group > .button { width:100%; min-height:32px; border-radius:7px; font-size:10px; }
.subin-studio-shell-v2 .subin-logic-summary { margin:0; padding:9px 10px; border-left:3px solid #93c5fd; border-radius:0 7px 7px 0; background:#eff6ff; color:#334155; font-size:10px; line-height:1.45; }
.subin-studio-shell-v2 .subin-logic-group { display:grid; gap:9px; min-width:0; margin:0; padding:10px; border:1px solid #dbe3ed; border-radius:9px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-logic-group legend { padding:0 5px; color:var(--v2-text); font-size:10px; font-weight:800; }
.subin-studio-shell-v2 .subin-logic-group__toolbar { display:grid; gap:7px; }
.subin-studio-shell-v2 .subin-logic-condition { padding:9px; border:1px solid var(--v2-border); border-radius:8px; background:#fff; }
.subin-studio-shell-v2 .subin-logic-value--unused { padding:8px; border-radius:7px; background:#eef2f7; color:var(--v2-muted); font-size:10px; text-align:center; }
.subin-studio-shell-v2 .subin-logic-validation { margin:0; padding:9px 10px; border-radius:8px; font-size:10px; line-height:1.45; }
.subin-studio-shell-v2 .subin-logic-validation.is-valid { border:1px solid #bbf7d0; background:#f0fdf4; color:#166534; }
.subin-studio-shell-v2 .subin-logic-validation.is-invalid { border:1px solid #fecaca; background:#fef2f2; color:#991b1b; }
.subin-studio-shell-v2 .subin-logic-validation li { margin:0 0 3px 15px; }
.subin-studio-shell-v2 .subin-logic-validation li:last-child { margin-bottom:0; }
.subin-studio-shell-v2 .subin-logic-card .button-link-delete { min-height:28px; padding:0; border:0; background:transparent; color:#b91c1c; font-size:10px; cursor:pointer; }

.subin-studio-shell-v2 .subin-studio-canvas { position:relative; min-width:0; height:100%; overflow:hidden; background:var(--v2-bg); }
.subin-studio-shell-v2 .subin-studio-canvas-label {
	position:absolute; top:12px; left:50%; z-index:8; display:flex; align-items:center; gap:7px; padding:6px 10px;
	border:1px solid rgba(203,213,225,.9); border-radius:99px; background:rgba(255,255,255,.9); color:var(--v2-muted);
	font-size:10px; font-weight:700; transform:translateX(-50%); pointer-events:none;
}
.subin-studio-shell-v2 .subin-studio-canvas-label__dot { width:6px; height:6px; border-radius:50%; background:#22c55e; }
.subin-studio-shell-v2 .subin-grapesjs-editor,
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-editor,
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-editor-cont { width:100%; height:100%!important; min-height:0; }
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-pn-panels,
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-pn-views,
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-pn-views-container { display:none!important; }
.subin-studio-shell-v2 .subin-grapesjs-editor .gjs-cv-canvas { top:0; right:0; width:100%; height:100%; background:var(--v2-bg); }
.subin-studio-shell-v2 .subin-studio-inspector-host { min-width:0; height:100%; overflow:hidden; border-left:1px solid var(--v2-border); background:#fff; }
.subin-studio-shell-v2 .subin-studio-inspector { display:flex!important; flex-direction:column; width:100%; height:100%; min-height:0; border:0; background:#fff; color:var(--v2-text); }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-head { flex:none; padding:16px 16px 0; border:0; border-bottom:1px solid var(--v2-border); background:#fff; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-title { margin:3px 0 2px; color:var(--v2-text); font-size:18px; font-weight:760; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-selected { color:var(--v2-muted); font-size:11px; }
.subin-studio-shell-v2 .subin-inspector-tabs { display:flex; gap:4px; margin-top:14px; overflow-x:auto; }
.subin-studio-shell-v2 .subin-inspector-tabs button { position:relative; flex:none; min-height:35px; padding:7px 5px 9px; border:0; background:transparent; color:var(--v2-muted); font-size:11px; font-weight:700; cursor:pointer; }
.subin-studio-shell-v2 .subin-inspector-tabs button.is-active { color:var(--v2-primary); box-shadow:inset 0 -2px var(--v2-primary); }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-scroll { flex:1; min-height:0; overflow:auto; padding:14px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-section { margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-inspector-section[hidden] { display:none; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-section-header { padding:4px 2px 10px; border:0; background:transparent; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-section-title { font-size:13px; font-weight:750; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-section-body { display:grid; gap:12px; padding:0; background:transparent; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-control,
.subin-studio-shell-v2 .subin-studio-inspector .subin-toggle-row,
.subin-studio-shell-v2 .subin-studio-inspector .subin-option-card { margin:0; padding:12px; border:1px solid var(--v2-border); border-radius:9px; background:#fff; box-shadow:none; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-control-label,
.subin-studio-shell-v2 .subin-studio-inspector .subin-toggle-label { margin-bottom:6px; color:#334155; font-size:11px; font-weight:700; }
.subin-studio-shell-v2 .subin-studio-inspector input.subin-input:not([type="checkbox"]),
.subin-studio-shell-v2 .subin-studio-inspector textarea.subin-textarea,
.subin-studio-shell-v2 .subin-studio-inspector select.subin-select { width:100%; min-height:38px; padding:8px 10px; border:1px solid var(--v2-strong); border-radius:7px; background:#fff; color:var(--v2-text); font-size:12px; box-shadow:none; }

.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; min-width:0; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__preview { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:116px; overflow:hidden; padding:14px; border:1px solid var(--v2-border); border-radius:9px; background-color:#fff; background-position:center; background-repeat:no-repeat; background-size:cover; color:var(--v2-muted); font-size:11px; font-weight:650; line-height:1.4; text-align:center; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__preview--empty { border-style:dashed; background-color:#f8fafc; background-image:none!important; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions .button { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:36px; margin:0; padding:7px 10px; border:1px solid var(--v2-strong); border-radius:7px; background:#fff; color:var(--v2-text); font-size:11px; font-weight:700; line-height:1.2; box-shadow:none; cursor:pointer; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions [data-subin-bg-select],
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions [data-subin-image-select] { border-color:var(--v2-primary); background:var(--v2-primary); color:#fff; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions .button:hover,
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions .button:focus-visible { border-color:var(--v2-primary); box-shadow:0 0 0 2px rgba(37,99,235,.14); }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait__actions .button:disabled { border-color:var(--v2-border); background:#f1f5f9; color:#94a3b8; box-shadow:none; cursor:not-allowed; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait > label { display:grid; gap:6px; min-width:0; margin:0; color:#334155; font-size:11px; font-weight:700; line-height:1.35; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait > label:last-child { grid-column:1 / -1; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait select { box-sizing:border-box; width:100%; min-width:0; min-height:38px; margin:0; padding:8px 28px 8px 10px; border:1px solid var(--v2-strong); border-radius:7px; background-color:#fff; color:var(--v2-text); font-size:12px; line-height:1.2; box-shadow:none; }
.subin-studio-shell-v2 .subin-studio-inspector .subin-gjs-media-trait select:focus { border-color:var(--v2-primary); outline:0; box-shadow:0 0 0 2px rgba(37,99,235,.14); }

.subin-studio-shell-v2.is-previewing .subin-design-studio__toolbar { display:none; }
.subin-studio-shell-v2.is-previewing .subin-studio-workspace { grid-template-columns:minmax(0,1fr); }
.subin-studio-shell-v2.is-previewing .subin-studio-library,
.subin-studio-shell-v2.is-previewing .subin-studio-inspector-host { display:none; }
@media (max-width:1400px) {
	.subin-studio-shell-v2 .subin-studio-workspace { grid-template-columns:300px minmax(0,1fr) 330px; }
	.subin-studio-shell-v2 .subin-studio-library { grid-template-columns:64px minmax(0,236px); }
	.subin-studio-shell-v2 .subin-design-studio__toolbar { grid-template-columns:minmax(220px,1fr) auto minmax(320px,1fr); gap:10px; }
}
@media (max-width:1280px) {
	.subin-studio-shell-v2 .subin-studio-workspace { grid-template-columns:64px minmax(0,1fr) 320px; }
	.subin-studio-shell-v2 .subin-studio-library { position:relative; grid-template-columns:64px; overflow:visible; }
	.subin-studio-shell-v2 .subin-studio-library-drawer, .subin-studio-shell-v2 .subin-design-toolbar__center { display:none; }
	.subin-studio-shell-v2.is-library-open .subin-studio-library-drawer {
		position:absolute; z-index:40; top:0; bottom:0; left:64px; display:block; width:280px;
		border-right:1px solid var(--v2-border); background:#fff; box-shadow:16px 0 34px rgba(15,23,42,.16);
	}
	.subin-studio-shell-v2 .subin-design-studio__toolbar { grid-template-columns:minmax(220px,1fr) minmax(350px,1fr); }
}
@media (max-width:960px) {
	.subin-admin-page:has(.subin-studio-shell-v2) { margin-right:12px; }
	.subin-studio-shell-v2 .subin-design-studio__toolbar { grid-template-columns:minmax(180px,1fr) auto; padding:9px 11px; }
	.subin-studio-shell-v2 .subin-design-toolbar__identity h2 { max-width:190px; }
	.subin-studio-shell-v2 .subin-studio-device-button span:last-child { display:none; }
}
@media (max-width:782px) {
	.subin-studio-shell-v2 .subin-studio-history-actions, .subin-studio-shell-v2 .subin-status-badge { display:none; }
	.subin-studio-shell-v2 .subin-studio-workspace { grid-template-columns:56px minmax(0,1fr); }
	.subin-studio-shell-v2 .subin-studio-library { display:grid; grid-template-columns:56px; }
	.subin-studio-shell-v2 .subin-studio-rail { padding-right:4px; padding-left:4px; }
	.subin-studio-shell-v2 .subin-studio-inspector-host { display:none; }
	.subin-studio-shell-v2.is-library-open .subin-studio-library-drawer { left:56px; width:min(300px,calc(100vw - 80px)); }
}

.subin-studio-shell-v2 .subin-studio-publish-layer {
	position:fixed; inset:0; z-index:100000; display:grid; justify-items:end; height:100vh; height:100dvh;
	max-height:100vh; max-height:100dvh; overflow:hidden; background:rgba(15,23,42,.24); overscroll-behavior:contain;
}
.subin-studio-shell-v2 .subin-studio-publish-layer[hidden] { display:none; }
.subin-studio-shell-v2 .subin-studio-publish-backdrop {
	position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:default;
}
.subin-studio-shell-v2 .subin-studio-publish-panel {
	position:relative; z-index:1; display:flex; flex-direction:column; width:min(430px,100%); height:100%; min-height:0; max-height:100dvh;
	border-left:1px solid var(--v2-border); background:#fff; box-shadow:-18px 0 50px rgba(15,23,42,.16);
	animation:subin-publish-panel-in .18s ease-out;
}
@keyframes subin-publish-panel-in { from { opacity:.5; transform:translateX(22px); } to { opacity:1; transform:none; } }
.subin-studio-shell-v2 .subin-studio-publish-panel__header {
	display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:14px;
	padding:20px; border-bottom:1px solid var(--v2-border); background:#fff;
}
.subin-studio-shell-v2 .subin-studio-publish-panel__header h2 { margin:3px 0 0; color:var(--v2-text); font-size:21px; line-height:1.2; }
.subin-studio-shell-v2 .subin-studio-publish-panel__body { flex:1; min-height:0; overflow:auto; padding:18px; background:var(--v2-soft); }
.subin-studio-shell-v2 .subin-studio-publish-summary {
	display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start; margin-bottom:16px;
	padding:14px; border:1px solid #cbd5e1; border-radius:11px; background:#fff;
}
.subin-studio-shell-v2 .subin-studio-publish-summary.is-ready { border-color:#bfdbfe; background:var(--v2-primary-soft); }
.subin-studio-shell-v2 .subin-studio-publish-summary > .dashicons {
	display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#e2e8f0; color:#475569;
}
.subin-studio-shell-v2 .subin-studio-publish-summary.is-ready > .dashicons { background:#dbeafe; color:var(--v2-primary); }
.subin-studio-shell-v2 .subin-studio-publish-summary strong { display:block; margin-bottom:3px; color:var(--v2-text); font-size:13px; }
.subin-studio-shell-v2 .subin-studio-publish-summary p,
.subin-studio-shell-v2 .subin-studio-publish-section > p { margin:0; color:var(--v2-muted); font-size:11px; line-height:1.45; }
.subin-studio-shell-v2 .subin-studio-publish-section {
	margin-bottom:14px; padding:14px; border:1px solid var(--v2-border); border-radius:11px; background:#fff;
}
.subin-studio-shell-v2 .subin-studio-publish-section h3 { margin:0 0 5px; color:var(--v2-text); font-size:13px; }
.subin-studio-shell-v2 .subin-studio-preflight { padding:0; overflow:hidden; }
.subin-studio-shell-v2 .subin-studio-preflight__heading {
	display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 14px 10px;
}
.subin-studio-shell-v2 .subin-studio-preflight__heading > div { min-width:0; }
.subin-studio-shell-v2 .subin-studio-preflight__heading h3 { margin:0 0 4px; }
.subin-studio-shell-v2 .subin-studio-preflight__heading p,
.subin-studio-shell-v2 .subin-studio-preflight__note,
.subin-studio-shell-v2 .subin-studio-sandbox-result p {
	margin:0; color:var(--v2-muted); font-size:10px; line-height:1.45;
}
.subin-studio-shell-v2 .subin-studio-preflight__badge {
	flex:none; padding:4px 8px; border:1px solid #dbe3ed; border-radius:99px;
	background:#f8fafc; color:#64748b; font-size:9px; font-weight:750; line-height:1.25; white-space:nowrap;
}
.subin-studio-shell-v2 .subin-studio-preflight__badge[data-status="running"] { border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8; }
.subin-studio-shell-v2 .subin-studio-preflight__badge[data-status="pass"] { border-color:#bbf7d0; background:#f0fdf4; color:#15803d; }
.subin-studio-shell-v2 .subin-studio-preflight__badge[data-status="warning"] { border-color:#fde68a; background:#fffbeb; color:#a16207; }
.subin-studio-shell-v2 .subin-studio-preflight__badge[data-status="fail"] { border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.subin-studio-shell-v2 .subin-studio-preflight__actions {
	display:flex; gap:7px; padding:0 14px 12px; border-bottom:1px solid #edf1f6;
}
.subin-studio-shell-v2 .subin-studio-preflight__actions .button { min-height:32px; padding:5px 10px; font-size:10px; }
.subin-studio-shell-v2 .subin-studio-preflight__results {
	display:grid; max-height:300px; overflow:auto; background:#fbfdff;
}
.subin-studio-shell-v2 .subin-studio-preflight__empty,
.subin-studio-shell-v2 .subin-studio-preflight__error {
	margin:0; padding:13px 14px; color:var(--v2-muted); font-size:10px; line-height:1.45;
}
.subin-studio-shell-v2 .subin-studio-preflight__error { color:#b91c1c; }
.subin-studio-shell-v2 .subin-studio-preflight-item {
	display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:start;
	padding:10px 14px; border-top:1px solid #edf1f6;
}
.subin-studio-shell-v2 .subin-studio-preflight-item:first-child { border-top:0; }
.subin-studio-shell-v2 .subin-studio-preflight-item__marker {
	display:grid; place-items:center; min-width:28px; height:24px; border-radius:7px;
	background:#eef2f7; color:#475569; font-size:8px; font-weight:800;
}
.subin-studio-shell-v2 .subin-studio-preflight-item[data-status="pass"] .subin-studio-preflight-item__marker { background:#dcfce7; color:#15803d; }
.subin-studio-shell-v2 .subin-studio-preflight-item[data-status="warning"] .subin-studio-preflight-item__marker { background:#fef3c7; color:#a16207; }
.subin-studio-shell-v2 .subin-studio-preflight-item[data-status="fail"] .subin-studio-preflight-item__marker { background:#fee2e2; color:#b91c1c; }
.subin-studio-shell-v2 .subin-studio-preflight-item strong { display:block; margin:1px 0 2px; color:var(--v2-text); font-size:10px; }
.subin-studio-shell-v2 .subin-studio-preflight-item p { margin:0; color:var(--v2-muted); font-size:9px; line-height:1.45; }
.subin-studio-shell-v2 .subin-studio-sandbox-result {
	margin:12px 14px 0; padding:10px 11px; border:1px solid #bfdbfe; border-radius:8px; background:#eff6ff; color:#1e40af;
}
.subin-studio-shell-v2 .subin-studio-sandbox-result[hidden] { display:none; }
.subin-studio-shell-v2 .subin-studio-sandbox-result[data-status="pass"] { border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.subin-studio-shell-v2 .subin-studio-sandbox-result[data-status="fail"] { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.subin-studio-shell-v2 .subin-studio-sandbox-result strong { display:block; margin-bottom:3px; font-size:10px; }
.subin-studio-shell-v2 .subin-studio-preflight__note { padding:11px 14px 14px; border-top:1px solid #edf1f6; }
.subin-studio-shell-v2 .subin-studio-revision-list { display:grid; gap:7px; margin-top:12px; }
.subin-studio-shell-v2 .subin-studio-revision-item {
	display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid #edf1f6;
}
.subin-studio-shell-v2 .subin-studio-revision-item:first-child { border-top:0; }
.subin-studio-shell-v2 .subin-studio-revision-item > div { display:grid; gap:2px; min-width:0; }
.subin-studio-shell-v2 .subin-studio-revision-item strong { font-size:11px; }
.subin-studio-shell-v2 .subin-studio-revision-item small { color:var(--v2-muted); font-size:10px; }
.subin-studio-shell-v2 .subin-studio-revision-badge { padding:3px 7px; border-radius:99px; background:#dcfce7; color:#15803d; font-size:9px; font-weight:750; }
.subin-studio-shell-v2 .subin-studio-publish-shortcode { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:10px; }
.subin-studio-shell-v2 .subin-studio-publish-shortcode code {
	overflow:hidden; padding:9px 10px; border:1px solid var(--v2-border); border-radius:8px;
	background:var(--v2-soft); color:#334155; font-size:10px; text-overflow:ellipsis; white-space:nowrap;
}
.subin-studio-shell-v2 .subin-studio-publish-shortcode .subin-copy-feedback { grid-column:1/-1; color:#15803d; font-size:10px; }
.subin-studio-shell-v2 .subin-studio-publish-panel__footer {
	display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; min-height:68px;
	padding:12px 18px; border-top:1px solid var(--v2-border); background:#fff;
}
.subin-studio-shell-v2 .subin-studio-publish-panel__footer > span { color:var(--v2-muted); font-size:11px; }
.subin-studio-shell-v2 .subin-studio-publish-panel__footer > span[data-status="error"] { color:#b91c1c; }
.subin-studio-shell-v2 .subin-studio-publish-panel__footer > span[data-status="success"] { color:#15803d; }
.subin-studio-shell-v2 .subin-studio-publish-panel__footer > div { display:flex; gap:7px; }
.subin-studio-shell-v2 .subin-studio-publish-panel .button {
	display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 12px;
	border:1px solid var(--v2-strong); border-radius:8px; background:#fff; color:var(--v2-text); font-size:11px; font-weight:700; box-shadow:none;
}
.subin-studio-shell-v2 .subin-studio-publish-panel .button-primary { border-color:var(--v2-primary); background:var(--v2-primary); color:#fff; }
