/* Local Montserrat font (preferred); Google Fonts remains as fallback */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Local Roboto */
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: url('../fonts/Roboto-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Local Open Sans */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Local Oswald */
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/Oswald-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/Oswald-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Тур (Intro.js) базовая стилизация */
.introjs-helperLayer{background-color:rgba(0,0,0,.5)!important;border-radius:8px!important}
.introjs-tooltip{max-width:350px!important;font-size:14px!important;background:#181825!important;color:#cdd6f4!important;border:1px solid #313244!important;box-shadow:0 4px 20px rgba(0,0,0,.3)!important;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif!important}
.introjs-button{background:#74c7ec!important;color:#1e1e2e!important;border:none!important;border-radius:4px!important;padding:5px 10px!important;font-weight:700!important;margin:3px!important}
.introjs-skipbutton{color:#cdd6f4!important;background:#45475a!important}
.introjs-bullets{display:none!important}
.introjs-tooltipbuttons{text-align:right!important;margin-top:10px!important}
.introjs-tooltiptext{line-height:1.5!important}
#start-tour{background-color:#ffd04c!important;color:#1e1e2e!important;margin-top:0!important;width:auto!important}
#start-tour:hover{background-color:#ffe08c!important}

/* Notification Animations */
@keyframes slideIn {
	from {
		transform: translateX(400px);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(400px);
		opacity: 0;
	}
}

/* Body стили */
body {
	margin: 0;
	padding: 0;
	background-color: #11111b;
	color: #cdd6f4;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	overflow: hidden;
}

/* Mobile Warning - Заглушка для мобильных */
.mobile-warning {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #11111b 0%, #181825 100%);
	z-index: 10000;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-warning-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px 80px 16px;
}

.mobile-warning-content {
	width: 100%;
	max-width: 400px;
}

/* Header */
.mobile-header {
	text-align: center;
	margin-bottom: 24px;
}

.mobile-icon {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
	box-shadow: 0 8px 20px rgba(116, 199, 236, 0.3);
}

.mobile-icon i {
	font-size: 28px;
	color: #11111b;
}

.mobile-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: #cdd6f4;
	margin: 0 0 8px 0;
	line-height: 1.2;
}

.mobile-header p {
	font-size: 14px;
	color: #a6adc8;
	margin: 0;
	line-height: 1.4;
}

/* Share Section */
.mobile-share-section {
	background: rgba(30, 30, 46, 0.8);
	border: 1px solid rgba(116, 199, 236, 0.15);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
}

.share-title {
	font-size: 14px;
	font-weight: 600;
	color: #cdd6f4;
	margin: 0 0 16px 0;
	text-align: center;
}

/* Share Grid */
.share-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 12px;
}

.share-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.share-btn i {
	font-size: 24px;
}

.share-btn:active {
	transform: scale(0.95);
}

.share-btn.telegram {
	background: linear-gradient(135deg, #229ED9 0%, #0088CC 100%);
	color: white;
}

.share-btn.whatsapp {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	color: white;
}

.share-btn.vk {
	background: linear-gradient(135deg, #4C75A3 0%, #45668e 100%);
	color: white;
}

/* Utility Grid */
.utility-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.utility-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 100%);
	color: #11111b;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.utility-btn i {
	font-size: 14px;
}

.utility-btn:active {
	transform: scale(0.95);
}

/* Navigation Section */
.mobile-nav-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.nav-btn i {
	font-size: 16px;
}

.nav-btn:active {
	transform: scale(0.98);
}

.nav-btn.primary {
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 100%);
	color: #11111b;
}

.nav-btn.secondary {
	background: rgba(116, 199, 236, 0.15);
	color: #74c7ec;
	border: 1.5px solid rgba(116, 199, 236, 0.3);
}

.mobile-warning-content {
	text-align: center;
	max-width: 500px;
	min-width: 320px;
	width: calc(100% - 2rem);
	position: relative;
	z-index: 1;
	animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mobile-icon-wrapper {
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 50%, #94e2d5 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.75rem;
	box-shadow: 0 8px 24px rgba(116, 199, 236, 0.3);
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0%, 100% { 
		transform: translateY(0px) scale(1);
	}
	50% { 
		transform: translateY(-10px) scale(1.05);
	}
}

.mobile-icon-wrapper i {
	font-size: 1.8rem;
	color: #11111b;
}

.mobile-warning-content h2 {
	color: #cdd6f4;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.4rem;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-warning-content > p {
	color: #bac2de;
	font-size: 0.85rem;
	line-height: 1.4;
	margin-bottom: 1rem;
	opacity: 0.9;
}

/* Quick Actions Section */
.mobile-quick-actions {
	background: rgba(49, 50, 68, 0.3);
	border: 1px solid rgba(116, 199, 236, 0.1);
	border-radius: 12px;
	padding: 1rem;
	margin-bottom: 1rem;
	backdrop-filter: blur(10px);
}

.mobile-quick-actions h3 {
	color: #cdd6f4;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	text-align: center;
}

/* Share Buttons */
.mobile-share-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.share-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.7rem 0.4rem;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}

.share-btn i {
	font-size: 1.4rem;
	transition: transform 0.3s;
}

.share-btn:hover i {
	transform: scale(1.1);
}

.share-btn:active {
	transform: scale(0.95);
}

.share-btn.telegram {
	background: linear-gradient(135deg, #229ED9 0%, #0088CC 100%);
	color: white;
}

.share-btn.telegram:hover {
	box-shadow: 0 6px 20px rgba(34, 158, 217, 0.4);
}

.share-btn.whatsapp {
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
	color: white;
}

.share-btn.whatsapp:hover {
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.share-btn.vk {
	background: linear-gradient(135deg, #4C75A3 0%, #45668e 100%);
	color: white;
}

.share-btn.vk:hover {
	box-shadow: 0 6px 20px rgba(76, 117, 163, 0.4);
}

/* Utility Buttons */
.mobile-utility-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.utility-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.7rem 0.75rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.75rem;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 100%);
	color: #11111b;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.utility-btn i {
	font-size: 0.9rem;
}

.utility-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(116, 199, 236, 0.4);
}

.utility-btn:active {
	transform: translateY(0);
}

/* Divider */
.mobile-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(116, 199, 236, 0.3) 50%, transparent 100%);
	margin: 1rem 0;
}

/* Navigation Buttons */
.mobile-nav-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.mobile-warning-content .button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.75rem 1.25rem;
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	justify-content: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
}

.mobile-warning-content .button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.mobile-warning-content .button:hover::before {
	width: 300px;
	height: 300px;
}

.mobile-warning-content .button-primary {
	background: linear-gradient(135deg, #74c7ec 0%, #89dceb 100%);
	color: #11111b;
}

.mobile-warning-content .button-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(116, 199, 236, 0.4);
}

.mobile-warning-content .button-primary:active {
	transform: translateY(0);
}

.mobile-warning-content .button-secondary {
	background: rgba(116, 199, 236, 0.1);
	color: #74c7ec;
	border: 1.5px solid rgba(116, 199, 236, 0.3);
}

.mobile-warning-content .button-secondary:hover {
	background: rgba(116, 199, 236, 0.15);
	border-color: #74c7ec;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(116, 199, 236, 0.2);
}

.mobile-warning-content .button-secondary:active {
	transform: translateY(0);
}

.mobile-warning-content .button i {
	font-size: 1rem;
	position: relative;
	z-index: 1;
}

.mobile-warning-content .button span {
	position: relative;
	z-index: 1;
}

/* Mobile Hint */
.mobile-hint {
	background: linear-gradient(135deg, rgba(249, 226, 175, 0.1) 0%, rgba(243, 139, 168, 0.1) 100%);
	border: 1px solid rgba(249, 226, 175, 0.2);
	border-radius: 10px;
	padding: 0.75rem;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	text-align: left;
}

.mobile-hint i {
	font-size: 1rem;
	color: #f9e2af;
	margin-top: 0.05rem;
	flex-shrink: 0;
}

.mobile-hint p {
	color: #cdd6f4;
	font-size: 0.75rem;
	line-height: 1.4;
	margin: 0;
	opacity: 0.9;
}

@media (max-width: 1024px) {
	.mobile-warning {
		display: flex;
	}
	
	.supa-editor {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.mobile-warning-content {
		max-width: 100%;
	}
	
	.mobile-icon-wrapper {
		width: 70px;
		height: 70px;
		margin-bottom: 1rem;
	}
	
	.mobile-icon-wrapper i {
		font-size: 2rem;
	}
	
	.mobile-warning-content h2 {
		font-size: 1.3rem;
	}
	
	.mobile-warning-content > p {
		font-size: 0.9rem;
		margin-bottom: 1.5rem;
	}
	
	.mobile-quick-actions {
		padding: 1.25rem;
	}
	
	.mobile-quick-actions h3 {
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.mobile-share-buttons {
		grid-template-columns: 1fr;
	}
	
	.share-btn {
		flex-direction: row;
		justify-content: center;
		padding: 1rem;
	}
	
	.share-btn i {
		font-size: 1.5rem;
	}
	
	.mobile-utility-buttons {
		grid-template-columns: 1fr;
	}
	
	.utility-btn {
		padding: 1rem;
	}
	
	.mobile-warning-content .button {
		padding: 0.95rem 1.25rem;
		font-size: 0.9rem;
	}
	
	.mobile-hint {
		padding: 0.85rem;
	}
	
	.mobile-hint i {
		font-size: 1rem;
	}
	
	.mobile-hint p {
		font-size: 0.8rem;
	}
}

/* Основные стили редактора */
.supa-editor * { margin: 0; padding: 0; box-sizing: border-box; }
.supa-editor, .supa-editor input, .supa-editor select, .supa-editor button, .supa-editor textarea { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.supa-editor { background-color: #1e1e2e; color: #cdd6f4; display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; }
.supa-editor { color-scheme: dark; }
.supa-editor header { background-color: #11111b; padding: 8px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #313244; position: relative; z-index: 100; }
.supa-editor .logo { font-size: 24px; font-weight: bold; color: #74c7ec; }
.supa-editor .header-actions { display: flex; align-items: center; gap: 8px; }
.supa-editor .icon-button { width: 36px; height: 32px; border-radius: 6px; border: 1px solid #313244; background: #181825; color: #cdd6f4; display: none; align-items: center; justify-content: center; cursor: pointer; }
.supa-editor .icon-button:hover { background: #313244; }
.supa-editor .header-actions-buttons { display: flex; gap: 6px; align-items: center; }
.supa-editor .header-actions .button { padding: 6px 10px; font-size: 12px; border-radius: 6px; height: 32px; display: inline-flex; align-items: center; white-space: nowrap; justify-content: center; }
.supa-editor .header-actions-buttons .button { min-width: 150px; }
.supa-editor .header-actions .button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(116,199,236,0.3); border-color: #74c7ec; }
.supa-editor .header-actions .button .btn-text { display: inline; }
.supa-editor .button-success {
	/* Базовый зелёный и плавный градиентный перелив */
	background: linear-gradient(90deg, #28e677 0%, #3af08a 50%, #28e677 100%);
	background-size: 200% 100%;
	animation: successGradientFlow 4s ease infinite;
	color: #0c1a0c;
	font-weight: 700;
}
.supa-editor .button-success:hover { filter: brightness(1.05); animation-duration: 2s; }
.supa-editor .button-success:focus-visible { box-shadow: 0 0 0 2px rgba(40,230,119,0.4); }

@keyframes successGradientFlow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.supa-editor .header-actions .button i { font-size: 12px; margin-right: 6px; }
.supa-editor .header-actions .button { height: 32px; display: inline-flex; align-items: center; }

/* Индикатор автосохранения */
.supa-editor .autosave-indicator {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(166, 227, 161, 0.15);
	border: 1px solid rgba(166, 227, 161, 0.3);
	border-radius: 6px;
	color: #a6e3a1;
	font-size: 12px;
	font-weight: 600;
	margin-left: 10px;
	transition: all 0.3s ease;
}

.supa-editor .autosave-indicator i {
	font-size: 12px;
	animation: fadeIn 0.3s ease;
}

.supa-editor .autosave-indicator.saving {
	background: rgba(116, 199, 236, 0.15);
	border-color: rgba(116, 199, 236, 0.3);
	color: #74c7ec;
}

.supa-editor .autosave-indicator.saving i {
	animation: spin 1s linear infinite;
}

.supa-editor .autosave-indicator.error {
	background: rgba(243, 139, 168, 0.15);
	border-color: rgba(243, 139, 168, 0.3);
	color: #f38ba8;
}

@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.8); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Адаптивный header: сворачиваем в бургер */
@media (max-width: 900px) {
	.supa-editor .header-actions-buttons { position: absolute; right: 8px; top: 44px; background: #181825; border: 1px solid #313244; border-radius: 8px; padding: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); display: none; flex-direction: column; gap: 8px; }
	.supa-editor .header-actions-buttons.open { display: flex; }
	.supa-editor .icon-button { display: inline-flex; }
		.supa-editor .header-actions-buttons .button { min-width: 220px; justify-content: flex-start; }
}
.supa-editor .main-container { display: flex; flex: 1; overflow: hidden; position: relative; }
.supa-editor .left-panel { width: 280px; background-color: #181825; padding: 20px; border-right: 1px solid #313244; overflow-y: auto; display: flex; flex-direction: column; transition: transform 0.3s ease; z-index: 90; }
.supa-editor .right-panel { width: 280px; background-color: #181825; padding: 20px; border-left: 1px solid #313244; overflow-y: auto; transition: transform 0.3s ease; z-index: 90; }
.supa-editor .panel-resizer { width: 6px; cursor: col-resize; background: transparent; position: relative; z-index: 91; }
.supa-editor .left-resizer { order: 0; }
.supa-editor .right-resizer { order: 2; }
.supa-editor .panel-resizer:hover { background: rgba(116,199,236,0.15); }
.supa-editor.compact-mode .left-panel, .supa-editor.compact-mode .right-panel { width: 220px; padding: 12px; }
.supa-editor.compact-mode .panel-section { margin-bottom: 10px; }
.supa-editor.compact-mode .tool-buttons { grid-template-columns: repeat(1, 1fr); }
.supa-editor.compact-mode .icons-grid { grid-template-columns: repeat(3, 1fr); }
.supa-editor .editor-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background-color: #1e1e2e; overflow: hidden; position: relative; }
.supa-editor #se-image-editor { background-color: #11111b; border: 1px solid #313244; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.supa-editor .panel-section { margin-bottom: 15px; }
.supa-editor .panel-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #74c7ec; display: flex; align-items: center; }
.supa-editor .panel-title i { margin-right: 6px; }
.supa-editor .upload-area { border: 2px dashed #45475a; border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 15px; cursor: pointer; transition: all 0.3s; }
.supa-editor .upload-area:hover { border-color: #74c7ec; background-color: #313244; }
.supa-editor .upload-icon { font-size: 36px; color: #74c7ec; margin-bottom: 8px; }
.supa-editor .button { background-color: #74c7ec; color: #1e1e2e; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; transition: all 0.2s; margin-bottom: 8px; width: 100%; justify-content: center; font-size: 13px; }
.supa-editor .button i { margin-right: 6px; font-size: 12px; }
.supa-editor .button:hover { background-color: #89dceb; }
.supa-editor .button-secondary { background-color: #45475a; color: #cdd6f4; font-size: 13px; }
.supa-editor .button-secondary:hover { background-color: #585b70; }
.supa-editor .control-group { margin-bottom: 10px; }
.supa-editor .control-label { display: block; margin-bottom: 5px; font-size: 13px; }
.supa-editor .slider-container { display: flex; align-items: center; }
.supa-editor .slider { flex: 1; height: 4px; appearance: none; -webkit-appearance: none; background: #45475a; border-radius: 5px; outline: none; }
.supa-editor .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #74c7ec; cursor: pointer; }
.supa-editor .slider-value { width: 35px; text-align: right; margin-left: 8px; font-size: 12px; }
.supa-editor .zoom-controls { position: absolute; bottom: 15px; right: 15px; background-color: rgba(17,17,27,0.7); border-radius: 6px; padding: 8px; display: flex; gap: 10px; z-index: 80; }
#se-zoom-level { min-width: 56px; text-align: center; line-height: 32px; font-weight: 600; color: #cdd6f4; }
.supa-editor .zoom-button { width: 32px; height: 32px; border-radius: 50%; background-color: #74c7ec; color: #1e1e2e; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.supa-editor .format-badges { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.supa-editor .format-badge { background-color: #313244; padding: 3px 8px; border-radius: 4px; font-size: 11px; }
.supa-editor .toggle-switch { position: relative; display: inline-block; width: 42px; height: 20px; }
.supa-editor .toggle-switch input { opacity: 0; width: 0; height: 0; }
.supa-editor .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #45475a; transition: .4s; border-radius: 24px; }
.supa-editor .toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: #ffffff; transition: .4s; border-radius: 50%; }
.supa-editor input:checked + .toggle-slider { background-color: #74c7ec; }
.supa-editor input:checked + .toggle-slider:before { transform: translateX(20px); }
.supa-editor .tab-controls { display: flex; background-color: #313244; border-radius: 6px; padding: 3px; margin-bottom: 10px; }
.supa-editor .tab { padding: 6px 12px; border-radius: 4px; cursor: pointer; flex: 1; text-align: center; font-size: 13px; }
.supa-editor .tab.active { background-color: #74c7ec; color: #1e1e2e; font-weight: 600; }
.supa-editor.compact-mode .tab-controls { position: sticky; top: 0; z-index: 5; }
.supa-editor.compact-mode .tab-content { max-height: calc(100vh - 220px); overflow: hidden auto; }
.supa-editor .tool-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.supa-editor .layers-list { max-height: 500px; overflow-y: auto; overflow-x: hidden; margin-bottom: 10px; border: 1px solid #313244; border-radius: 6px; padding: 4px; }
.supa-editor.compact-mode .layers-list { max-height: 320px; }
.supa-editor .layer-item { display: flex; align-items: center; padding: 6px; margin-bottom: 4px; border-radius: 4px; cursor: pointer; transition: all 0.2s; background-color: #313244; font-size: 13px; }
.supa-editor .layer-item:hover { background-color: #45475a; }
.supa-editor .layer-item.selected { background-color: #74c7ec; color: #1e1e2e; }
.supa-editor .layer-item.hidden { opacity: 0.5; }
.supa-editor .layer-item.locked { opacity: 0.7; background-color: #585b70; }
.supa-editor .layer-item.group { background-color: #2a3f2a; /* тёмно-зелёный фон для групп */ }
.supa-editor .layer-item.group.selected { background-color: #3fb950; color: #0c1a0c; }
.supa-editor .layer-icon { margin-right: 6px; width: 18px; text-align: center; font-size: 12px; }
.supa-editor .layer-name { flex: 1; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supa-editor .layer-visibility { margin-right: 4px; cursor: pointer; opacity: 0.7; font-size: 12px; }
.supa-editor .layer-visibility:hover { opacity: 1; }
.supa-editor .layer-item { position: relative; overflow: visible; }
.supa-editor .layer-menu { display: flex; gap: 6px; position: relative; }
.supa-editor .layer-menu-btn { width: 26px; height: 26px; border-radius: 4px; border: none; background: #45475a; color: #cdd6f4; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.supa-editor .layer-menu-btn:hover { background: #585b70; }
.supa-editor .layer-menu-content { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: #181825; border: 1px solid #313244; border-radius: 6px; padding: 6px; z-index: 300; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.supa-editor .layer-menu.open .layer-menu-content { display: block; }
.supa-editor .layer-menu-content button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: transparent; color: #cdd6f4; text-align: left; cursor: pointer; border-radius: 4px; font-size: 12px; }
.supa-editor .layer-menu-content button:hover { background: #313244; }
.supa-editor .layer-actions { display: flex; gap: 6px; margin-left: 6px; }
.supa-editor .editor-area canvas { display: block; }

/* Контрасты для подписей и инпутов под тёмную тему */
.supa-editor label,
.supa-editor .control-label {
	color: #cdd6f4; /* светлый текст для читабельности */
}

/* Общие поля ввода под тёмную тему (кроме range и color) */
.supa-editor input[type="text"],
.supa-editor input[type="number"],
.supa-editor textarea,
.supa-editor select {
	background-color: #181825;
	color: #cdd6f4;
	border: 1px solid #313244;
	border-radius: 6px;
}
.supa-editor input[type="text"],
.supa-editor input[type="number"],
.supa-editor select {
	padding: 8px;
	font-size: 13px;
}
.supa-editor input[type="text"]::placeholder,
.supa-editor textarea::placeholder {
	color: #a6adc8;
}
.supa-editor select:focus,
.supa-editor input[type="text"]:focus,
.supa-editor input[type="number"]:focus,
.supa-editor textarea:focus {
	outline: none;
	border-color: #74c7ec;
	box-shadow: 0 0 0 2px rgba(116,199,236,0.2);
}
/* Color picker без фона */
.supa-editor input[type="color"] {
	background: transparent;
	border: none;
}

/* Range slider стили (полная версия с треком) */
.supa-editor input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: #45475a;
	border-radius: 5px;
	outline: none;
	opacity: 0.9;
	transition: opacity 0.2s;
}

.supa-editor input[type="range"]:hover {
	opacity: 1;
}

/* Webkit (Chrome, Safari, Edge) */
.supa-editor input[type="range"]::-webkit-slider-track {
	width: 100%;
	height: 6px;
	background: #45475a;
	border-radius: 5px;
}

.supa-editor input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #74c7ec;
	cursor: pointer;
	border-radius: 50%;
	border: 2px solid #1e1e2e;
	transition: all 0.2s;
}

.supa-editor input[type="range"]::-webkit-slider-thumb:hover {
	background: #89b4fa;
	transform: scale(1.1);
}

/* Firefox */
.supa-editor input[type="range"]::-moz-range-track {
	width: 100%;
	height: 6px;
	background: #45475a;
	border-radius: 5px;
}

.supa-editor input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #74c7ec;
	cursor: pointer;
	border-radius: 50%;
	border: 2px solid #1e1e2e;
	transition: all 0.2s;
}

.supa-editor input[type="range"]::-moz-range-thumb:hover {
	background: #89b4fa;
	transform: scale(1.1);
}

/* Стили для disabled-полей, чтобы были различимы на тёмном фоне */
.supa-editor select:disabled,
.supa-editor input[type="text"]:disabled,
.supa-editor input[type="number"]:disabled,
.supa-editor textarea:disabled {
	background-color: #11111b;
	color: #a6adc8;
	opacity: 1; /* оставляем читаемость */
}

/* Специально для выпадающих списков: тёмный фон у опций */
.supa-editor select option {
	background-color: #181825 !important;
	color: #cdd6f4 !important;
}
/* Dark selects with stronger specificity */
.supa-editor .right-panel select.button-secondary,
.supa-editor .right-panel select#se-font-family,
.supa-editor .right-panel select#se-text-align,
.supa-editor .right-panel #se-font-family.button-secondary,
.supa-editor .right-panel #se-text-align.button-secondary,
.supa-editor #se-icons-category.icons-category-select,
.supa-editor .icons-category-select {
	background-color: #181825 !important;
	color: #cdd6f4 !important;
	border: 1px solid #313244 !important;
}
.supa-editor .right-panel select.button-secondary:focus,
.supa-editor .right-panel select#se-font-family:focus,
.supa-editor .right-panel select#se-text-align:focus,
.supa-editor #se-icons-category.icons-category-select:focus,
.supa-editor .icons-category-select:focus {
	outline: none !important;
	border-color: #74c7ec !important;
	box-shadow: 0 0 0 2px rgba(116,199,236,0.2) !important;
}

	/* Final override for any selects inside editor */
	.supa-editor select {
		background-color: #181825 !important;
		color: #cdd6f4 !important;
		border: 1px solid #313244 !important;
	}
	.supa-editor select option {
		background-color: #181825 !important;
		color: #cdd6f4 !important;
	}

/* Форсируем тёмные выпадающие списки и светлый текст с повышенной специфичностью */
.supa-editor select,
.supa-editor .icons-category-select,
#se-font-family,
#se-text-align,
#se-icons-category {
	background-color: #181825 !important;
	color: #cdd6f4 !important;
	border: 1px solid #313244 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.supa-editor select:focus,
#se-font-family:focus,
#se-text-align:focus,
#se-icons-category:focus {
	outline: none !important;
	border-color: #74c7ec !important;
	box-shadow: 0 0 0 2px rgba(116,199,236,0.2) !important;
}
.supa-editor select:disabled,
#se-font-family:disabled,
#se-text-align:disabled,
#se-icons-category:disabled {
	background-color: #11111b !important;
	color: #a6adc8 !important;
}

/* Поисковая строка и селект категорий иконок */
.supa-editor .icons-search,
.supa-editor .icons-category-select {
	background-color: #181825;
	color: #cdd6f4;
	border: 1px solid #313244;
	border-radius: 6px;
	padding: 8px;
	font-size: 13px;
}

/* Быстрая панель ИИ внизу рабочей области */
/* Нижняя панель ИИ */
.supa-editor .ai-footer { position: absolute; left: 20px; right: 20px; bottom: 20px; background: rgba(17,17,27,0.92); border: 1px solid #313244; border-radius: 10px; padding: 12px; z-index: 85; backdrop-filter: blur(4px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); transition: transform .2s ease, opacity .2s ease, visibility .2s ease; }
.supa-editor .ai-footer.hidden { transform: translateY(15px); opacity: 0; visibility: hidden; pointer-events: none; }
.supa-editor .ai-footer-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.supa-editor .ai-field { display: flex; flex-direction: column; gap: 6px; }
.supa-editor .ai-field.full { grid-column: 1 / -1; }
.supa-editor .ai-field label { font-size: 12px; color: #a6adc8; }
.supa-editor #se-quick-prompt, .supa-editor #se-quick-output { width: 100%; resize: vertical; padding: 10px; border-radius: 8px; border: 1px solid #313244; background: #181825; color: #cdd6f4; font-size: 13px; }
.supa-editor #se-quick-output { min-height: 70px; }
.supa-editor .ai-actions { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.supa-editor .ai-status { font-size: 12px; color: #a6adc8; min-height: 16px; text-align: center; }

/* Кнопка-тогглер панели ИИ */
.supa-editor .ai-toggle-btn { position: absolute; right: 20px; bottom: 20px; z-index: 90; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #313244; background: #74c7ec; color: #1e1e2e; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.supa-editor .ai-toggle-btn:hover { background: #89dceb; }
.supa-editor .ai-toggle-btn .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }

/* Сетка иконок */
.supa-editor .icons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 300px; overflow-y: auto; margin-bottom: 10px; padding: 5px; }
.supa-editor .icon-item { background-color: #313244; border-radius: 6px; padding: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; aspect-ratio: 1/1; }
.supa-editor .icon-item:hover { background-color: #45475a; transform: scale(1.05); }
.supa-editor .icon-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.supa-editor .icon-item .material-symbols-preview { font-size: 32px; line-height: 1; color: #cdd6f4; }
/* Material Symbols classes to enable ligatures properly */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }
.material-symbols-rounded  { font-family: 'Material Symbols Rounded'; }
.material-symbols-sharp    { font-family: 'Material Symbols Sharp'; }
.supa-editor .icons-mode-toggle { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.supa-editor .icons-mode-toggle .mode-btn { background: #45475a; color: #cdd6f4; border: none; border-radius: 6px; padding: 6px 8px; cursor: pointer; font-size: 12px; width: 100%; text-align: left; }
.supa-editor .icons-mode-toggle .mode-btn.active { background: #74c7ec; color: #1e1e2e; }
.supa-editor .icons-filters { display: flex; gap: 8px; margin: 8px 0; }
.supa-editor .icons-select { background-color: #181825; color: #cdd6f4; border: 1px solid #313244; border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.supa-editor #se-emoji-grid .emoji-item { background-color: #313244; border-radius: 6px; padding: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; aspect-ratio: 1/1; font-size: 28px; }
.supa-editor #se-emoji-grid .emoji-item:hover { background-color: #45475a; transform: scale(1.05); }
/* Место под емодзи-карточки остаётся без кнопки избранного */

/* Глобальное контекстное меню канваса */
.supa-editor .context-menu { display: none; position: fixed; left: 0; top: 0; background: #181825; border: 1px solid #313244; border-radius: 8px; padding: 6px; z-index: 1000; min-width: 200px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
.supa-editor .context-menu .context-menu-item, .supa-editor .context-menu button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: transparent; color: #cdd6f4; border: none; text-align: left; cursor: pointer; border-radius: 4px; font-size: 13px; }
.supa-editor .context-menu .context-menu-item:hover, .supa-editor .context-menu button:hover { background: #313244; }
.supa-editor .context-menu .context-menu-divider { height: 1px; background: #313244; margin: 6px 0; }
.supa-editor .context-menu .color-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px 0; }
.supa-editor .context-menu .color-option { width: 20px; height: 20px; border-radius: 4px; border: 1px solid #313244; cursor: pointer; }

/* Мобильные кнопки открытия панелей (прятать на десктопе) */
.supa-editor .mobile-menu-toggle { display: none; position: absolute; top: 15px; left: 15px; z-index: 1000; background-color: #74c7ec; color: #1e1e2e; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-size: 16px; }

/* Виртуальная клавиатура (по умолчанию скрыта) */
.supa-editor .virtual-keyboard { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #313244; padding: 10px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); z-index: 1001; }
.supa-editor .keyboard-keys { display: flex; flex-wrap: wrap; justify-content: center; }
.supa-editor .keyboard-keys button { margin: 3px; padding: 8px; min-width: 30px; background-color: #45475a; color: #cdd6f4; border: none; border-radius: 4px; cursor: pointer; }

/* Респонсив: планшеты/ноутбуки */
@media (max-width: 1200px) {
	.supa-editor .left-panel, .supa-editor .right-panel { width: 240px; }
	.supa-editor .icons-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Респонсив: мобилки */
@media (max-width: 900px) {
	.supa-editor .mobile-menu-toggle { display: block; }
	.supa-editor .left-panel, .supa-editor .right-panel { position: absolute; top: 0; height: 100%; z-index: 99; transition: transform 0.3s ease; background-color: #181825; }
	.supa-editor .left-panel { left: 0; transform: translateX(-100%); width: 280px; border-right: 1px solid #313244; }
	.supa-editor .right-panel { right: 0; transform: translateX(100%); width: 280px; border-left: 1px solid #313244; }
	.supa-editor .left-panel.open, .supa-editor .right-panel.open { transform: translateX(0); }
	.supa-editor .main-container { flex-direction: column; }
	.supa-editor .editor-area { min-height: 400px; }
	.supa-editor .tool-buttons { grid-template-columns: repeat(4, 1fr); }
	.supa-editor .icons-grid { grid-template-columns: repeat(6, 1fr); max-height: 150px; }
	/* Сдвигаем панель выше, если мало места */
	.supa-editor .ai-footer { bottom: 80px; left: 12px; right: 12px; }
	.supa-editor .ai-toggle-btn { bottom: 20px; right: 12px; }
}

/* Rulers and Grid */
.supa-editor .rulers-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; }
.supa-editor .ruler { background-color: #181825; border: 1px solid #313244; position: absolute; pointer-events: none; }
.supa-editor .ruler-horizontal { top: 0; left: 30px; right: 0; height: 30px; border-left: none; border-right: none; border-top: none; }
.supa-editor .ruler-vertical { left: 0; top: 30px; bottom: 0; width: 30px; border-top: none; border-bottom: none; border-left: none; }
.supa-editor .ruler-corner { position: absolute; top: 0; left: 0; width: 30px; height: 30px; background-color: #11111b; border-right: 1px solid #313244; border-bottom: 1px solid #313244; }
.supa-editor .ruler-mark { position: absolute; color: #6c7086; font-size: 9px; }
.supa-editor .ruler-horizontal .ruler-mark { top: 5px; }
.supa-editor .ruler-horizontal .ruler-mark::before { content: ''; position: absolute; left: 0; top: -5px; width: 1px; height: 5px; background-color: #45475a; }
.supa-editor .ruler-vertical .ruler-mark { left: 5px; writing-mode: vertical-rl; text-orientation: mixed; }
.supa-editor .ruler-vertical .ruler-mark::before { content: ''; position: absolute; top: 0; left: -5px; height: 1px; width: 5px; background-color: #45475a; }
.supa-editor .ruler-mark span { margin-left: 2px; }
.supa-editor .ruler-vertical .ruler-mark span { margin-top: 2px; }

/* Modal Styles */
.modal,
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.modal-content {
	background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%);
	border: 1px solid rgba(116, 199, 236, 0.3);
	border-radius: 16px;
	box-shadow: 
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 1px 2px rgba(255, 255, 255, 0.1) inset;
	color: #cdd6f4;
	max-width: 90%;
	max-height: 85vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: modalFadeIn 0.3s ease-out;
	position: relative;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.9) translateY(-20px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(49, 50, 68, 0.5);
	background: linear-gradient(180deg, rgba(17, 17, 27, 0.8) 0%, transparent 100%);
	cursor: move;
	user-select: none;
}

.modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	background: linear-gradient(135deg, #74c7ec 0%, #89b4fa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: flex;
	align-items: center;
	gap: 10px;
}

.modal-header h3 i {
	-webkit-text-fill-color: #74c7ec;
	font-size: 20px;
}

.modal-close {
	background: rgba(49, 50, 68, 0.4);
	border: 1px solid rgba(69, 71, 90, 0.5);
	color: #cdd6f4;
	font-size: 20px;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: all 0.2s;
}

.modal-close:hover {
	background-color: rgba(243, 139, 168, 0.2);
	border-color: #f38ba8;
	color: #f38ba8;
	transform: rotate(90deg);
}

.modal-body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

.modal-body::-webkit-scrollbar {
	width: 8px;
}

.modal-body::-webkit-scrollbar-track {
	background: rgba(49, 50, 68, 0.3);
	border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
	background: rgba(116, 199, 236, 0.3);
	border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
	background: rgba(116, 199, 236, 0.5);
}

/* Modal Input Styles */
.modal-body input[type="text"],
.modal-body input[type="search"] {
	background: rgba(17, 17, 27, 0.6);
	border: 1px solid rgba(49, 50, 68, 0.8);
	color: #cdd6f4;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 14px;
	transition: all 0.2s;
}

.modal-body input[type="text"]:focus,
.modal-body input[type="search"]:focus {
	outline: none;
	border-color: #74c7ec;
	box-shadow: 0 0 0 3px rgba(116, 199, 236, 0.15);
	background: rgba(17, 17, 27, 0.8);
}

.modal-body input[type="color"] {
	cursor: pointer;
	border: 1px solid rgba(49, 50, 68, 0.8);
	border-radius: 8px;
	background: transparent;
	transition: all 0.2s;
}

.modal-body input[type="color"]:hover {
	border-color: #74c7ec;
	box-shadow: 0 0 0 3px rgba(116, 199, 236, 0.15);
}

/* Category Buttons */
.category-btn {
	padding: 6px 14px;
	font-size: 13px;
	border-radius: 6px;
	border: 1px solid rgba(49, 50, 68, 0.8);
	background: rgba(24, 24, 37, 0.8);
	color: #cdd6f4;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.category-btn:hover {
	background: rgba(49, 50, 68, 0.8);
	border-color: #74c7ec;
	color: #74c7ec;
}

.category-btn.active {
	background: linear-gradient(135deg, #74c7ec 0%, #89b4fa 100%);
	border-color: #74c7ec;
	color: #1e1e2e;
	font-weight: 600;
}

/* Grid Styles */
#emoji-grid,
#icon-grid,
#svg-grid {
	display: grid;
	gap: 8px;
	max-height: 450px;
	overflow-y: auto;
	padding: 4px;
}

#emoji-grid {
	grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
}

#icon-grid {
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

#svg-grid {
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

/* Item Buttons */
.emoji-item,
.icon-item,
.svg-item {
	padding: 12px;
	border: 1px solid rgba(49, 50, 68, 0.6);
	border-radius: 8px;
	background: rgba(17, 17, 27, 0.4);
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.emoji-item {
	font-size: 28px;
	aspect-ratio: 1;
}

.icon-item {
	font-size: 28px;
	aspect-ratio: 1;
}

.svg-item {
	min-height: 80px;
}

.emoji-item:hover,
.icon-item:hover,
.svg-item:hover {
	background: rgba(116, 199, 236, 0.15);
	border-color: #74c7ec;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(116, 199, 236, 0.2);
}

.emoji-item:active,
.icon-item:active,
.svg-item:active {
	transform: translateY(0);
}

/* Responsive Modal */
@media (max-width: 768px) {
	.modal-content {
		max-width: 95%;
		max-height: 90vh;
		border-radius: 12px;
	}
	
	.modal-body {
		padding: 16px;
	}
	
	#emoji-grid {
		grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
		gap: 6px;
	}
	
	.emoji-item {
		font-size: 24px;
		padding: 8px;
	}
}

/* ========================================
   CONTEXT MENU - Компактное контекстное меню
   ======================================== */
.context-menu {
	position: fixed;
	background: linear-gradient(135deg, #1e1e2e 0%, #181825 100%);
	border: 1px solid #45475a;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	padding: 6px;
	min-width: 200px;
	z-index: 99999;
	display: none !important;
	backdrop-filter: blur(10px);
	pointer-events: auto;
}

.context-menu.show {
	display: block !important;
	animation: contextMenuFadeIn 0.15s ease;
}

@keyframes contextMenuFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-5px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.context-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	border-radius: 6px;
	color: #cdd6f4;
	font-size: 13px;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.context-menu-item:hover {
	background: linear-gradient(90deg, #313244 0%, #45475a 100%);
	color: #74c7ec;
}

.context-menu-item:active {
	transform: scale(0.98);
}

.context-menu-item i {
	font-size: 14px;
	width: 16px;
	text-align: center;
	color: #74c7ec;
}

.context-menu-item.danger:hover {
	background: linear-gradient(90deg, #3d2229 0%, #4a2832 100%);
	color: #f38ba8;
}

.context-menu-item.danger i {
	color: #f38ba8;
}

.context-menu-separator {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, #45475a 50%, transparent 100%);
	margin: 4px 0;
}

.context-menu-item.disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ========================================
   ENHANCED MODAL & FORM STYLES
   ======================================== */

/* Beautiful Form Groups */
.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #89b4fa;
	letter-spacing: 0.3px;
}

/* Enhanced Input Fields */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
	width: 100%;
	background: linear-gradient(135deg, rgba(17, 17, 27, 0.8) 0%, rgba(24, 24, 37, 0.6) 100%);
	border: 2px solid rgba(69, 71, 90, 0.6);
	color: #cdd6f4;
	border-radius: 12px;
	padding: 12px 16px;
	font-size: 14px;
	font-family: inherit;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.3),
		inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select:focus {
	outline: none;
	border-color: #74c7ec;
	background: linear-gradient(135deg, rgba(17, 17, 27, 0.95) 0%, rgba(24, 24, 37, 0.8) 100%);
	box-shadow: 
		0 0 0 4px rgba(116, 199, 236, 0.15),
		0 4px 12px rgba(116, 199, 236, 0.2),
		inset 0 1px 2px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.form-group input[type="text"]::placeholder,
.form-group input[type="number"]::placeholder,
.form-group textarea::placeholder {
	color: rgba(205, 214, 244, 0.4);
	font-style: italic;
}

/* Textarea specific */
.form-group textarea {
	resize: vertical;
	min-height: 80px;
	line-height: 1.5;
}

/* Select specific */
.form-group select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2374c7ec' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 40px;
}

.form-group select option {
	background: #181825;
	color: #cdd6f4;
	padding: 10px;
}

/* Enhanced Buttons */
.form-actions {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(69, 71, 90, 0.3);
}

.form-actions .button {
	padding: 12px 24px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	position: relative;
	overflow: hidden;
}

/* Cancel Button */
.form-actions .button:not(.button-success) {
	background: linear-gradient(135deg, rgba(69, 71, 90, 0.6) 0%, rgba(49, 50, 68, 0.6) 100%);
	color: #cdd6f4;
	border: 2px solid rgba(69, 71, 90, 0.8);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.form-actions .button:not(.button-success):hover {
	background: linear-gradient(135deg, rgba(69, 71, 90, 0.8) 0%, rgba(49, 50, 68, 0.8) 100%);
	border-color: #89b4fa;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Success Button (Save) */
.form-actions .button-success {
	background: linear-gradient(135deg, #a6e3a1 0%, #94e2d5 50%, #89dceb 100%);
	color: #1e1e2e;
	border: 2px solid rgba(255, 255, 255, 0.3);
	box-shadow: 
		0 4px 16px rgba(166, 227, 161, 0.4),
		inset 0 1px 2px rgba(255, 255, 255, 0.3);
	font-weight: 700;
}

.form-actions .button-success:hover {
	background: linear-gradient(135deg, #b8ebb5 0%, #a8e9e3 50%, #9de7f5 100%);
	transform: translateY(-2px) scale(1.02);
	box-shadow: 
		0 8px 24px rgba(166, 227, 161, 0.5),
		inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.form-actions .button-success:active {
	transform: translateY(0) scale(0.98);
}

/* Button Ripple Effect */
.form-actions .button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.form-actions .button:active::before {
	width: 300px;
	height: 300px;
}

/* Enhanced Modal Header */
.modal-header h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	background: linear-gradient(135deg, #f9e2af 0%, #fab387 50%, #f38ba8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Small helper text */
.form-group small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: rgba(205, 214, 244, 0.6);
	font-style: italic;
}