.sf-design-box {
	margin-top: 18px !important;
	max-width: 500px !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 18px !important;
	background: #ffffff !important;
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
	overflow: hidden !important;
	color: #111827 !important;
}

.sf-design-minihead {
	padding: 12px 12px 0 !important;
}

.sf-design-title {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.25 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	color: #0f172a !important;
}

.sf-design-tabs {
	display: grid !important;
	grid-template-columns: repeat(var(--tab-count, 3), 1fr) !important;
	gap: 8px !important;
	padding: 12px 12px 0 !important;
}

.sf-design-tab {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	min-height: 40px !important;
	padding: 0 10px !important;
	border: 1px solid #e7ebf1 !important;
	border-radius: 11px !important;
	background: #fff !important;
	color: #64748b !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	cursor: pointer !important;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

.sf-design-tab:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 8px 16px rgba(15, 23, 42, 0.05) !important;
}

.sf-design-tab.active {
	border-color: var(--sf-tab-accent) !important;
	background: linear-gradient(180deg, var(--sf-tab-soft) 0%, #fff 100%) !important;
	color: var(--sf-tab-accent) !important;
}

.sf-tab-ext {
	font-weight: 800 !important;
}

.sf-tab-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 5px !important;
	border-radius: 999px !important;
	background: rgba(148, 163, 184, 0.12) !important;
	font-size: 9px !important;
	font-weight: 800 !important;
}

.sf-design-panels {
	padding: 12px !important;
}

.sf-design-panel {
	display: none !important;
	padding: var(--sf-panel-padding, 12px) !important;
	border: 1px solid #edf1f5 !important;
	border-radius: 14px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
}

.sf-design-panel.active {
	display: block !important;
}

.sf-format-bar {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 8px !important;
}

.sf-format-ext {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 46px !important;
	height: 26px !important;
	padding: 0 8px !important;
	border-radius: 999px !important;
	background: var(--sf-format-soft) !important;
	color: var(--sf-format-accent) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .06em !important;
}

.sf-format-copy {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
	min-width: 0 !important;
}

.sf-format-label {
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #94a3b8 !important;
}

.sf-format-title {
	font-size: 12px !important;
	line-height: 1.25 !important;
	color: #0f172a !important;
}

.sf-format-desc {
	font-size: 10px !important;
	line-height: 1.3 !important;
	color: #64748b !important;
}

.sf-design-files {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--sf-file-gap, 6px) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.sf-design-file {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: var(--sf-file-py, 8px) var(--sf-file-px, 10px) !important;
	border: 1px solid #edf1f5 !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #fff 0%, var(--sf-file-soft) 100%) !important;
	color: #111827 !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.sf-design-file:hover {
	transform: translateY(-2px) !important;
	border-color: var(--sf-file-accent) !important;
	box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06) !important;
}

.sf-design-file-main {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	flex: 1 1 auto !important;
	text-decoration: none !important;
	color: #111827 !important;
}

.sf-design-file-main:hover {
	text-decoration: none !important;
	color: #111827 !important;
}

.sf-file-icon {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}

.sf-file-icon svg {
	width: 16px !important;
	height: 16px !important;
}

.sf-file-icon > span {
	position: absolute !important;
	left: 50% !important;
	top: 54% !important;
	transform: translate(-50%, -50%) !important;
	font-size: 4px !important;
	font-weight: 900 !important;
	letter-spacing: .02em !important;
}

.sf-design-file-name {
	display: block !important;
	min-width: 0 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #111827 !important;
	word-break: break-word !important;
}

.sf-design-file-actions {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--sf-action-gap, 6px) !important;
	flex-shrink: 0 !important;
}

.sf-design-file-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	width: 78px !important;
	height: 30px !important;
	padding: 0 8px !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.9) !important;
	color: var(--sf-file-accent) !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
	border: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
	font-family: inherit !important;
}

.sf-design-file-cta:hover {
	text-decoration: none !important;
	opacity: .92 !important;
}

.sf-design-share {
	background: var(--sf-share-button-color, #25D366) !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.sf-design-download {
	background: #ef4444 !important;
	color: #ffffff !important;
	box-shadow: none !important;
}

.sf-design-help {
	padding: 14px 16px 16px !important;
	border-top: 1px solid #eef2f7 !important;
	background: linear-gradient(180deg, #fcfcfd 0%, #f8fafc 100%) !important;
}

.sf-help-intro {
	margin-bottom: 6px !important;
}

.sf-help-intro strong {
	display: block !important;
	margin-bottom: 2px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	color: #111827 !important;
}

.sf-help-intro span {
	font-size: 11px !important;
	line-height: 1.4 !important;
	color: #64748b !important;
}

.sf-design-help details {
	padding: 9px 0 !important;
	border-bottom: 1px solid #edf1f5 !important;
}

.sf-design-help details:last-child {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.sf-design-help summary {
	position: relative !important;
	padding: 0 22px 0 0 !important;
	list-style: none !important;
	cursor: pointer !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	color: #334155 !important;
}

.sf-design-help summary::-webkit-details-marker {
	display: none !important;
}

.sf-design-help summary::after {
	content: "+" !important;
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: #94a3b8 !important;
}

.sf-design-help details[open] > summary::after {
	content: "−" !important;
}

.sf-design-help p {
	margin: 6px 0 0 !important;
	font-size: 11px !important;
	line-height: 1.55 !important;
	color: #64748b !important;
}

@media (max-width: 767px) {
	.sf-design-box {
		max-width: 100% !important;
		border-radius: 16px !important;
	}

	.sf-design-tabs {
		grid-template-columns: 1fr !important;
	}

	.sf-design-file {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.sf-design-file-actions {
		justify-content: flex-end !important;
	}

	.sf-design-file-cta {
		justify-content: center !important;
	}
}