:root {
			--primary: #5b21b6;
			--primary-dark: #4c1d95;
			--primary-light: #f3e8ff;
			--accent: #ec4899;
			--text: #0f172a;
			--text-secondary: #475569;
			--text-muted: #64748b;
			--bg: #f8fafc;
			--surface: #ffffff;
			--surface-hover: #f1f5f9;
			--border: #e2e8f0;
			--shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
			--shadow: 0 10px 30px rgba(0,0,0,0.12);
			--radius: 12px;
			--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		}


		.logo{
			color: #174263 !important;
		}

		[data-theme="dark"] {
			--primary: #7c3aed;
			--primary-dark: #6d28d9;
			--primary-light: #4c1d95;
			--accent: #f472b6;
			--text: #f8fafc;
			--text-secondary: #cbd5e1;
			--text-muted: #94a3b8;
			--bg: #0f172a;
			--surface: #1e293b;
			--surface-hover: #334155;
			--border: #334155;
		}

		* { margin:0; padding:0; box-sizing:border-box; }
		body {
			font-family: system-ui, sans-serif;
			background: var(--bg);
			color: var(--text);
			min-height: 100vh;
			margin: 0;
		}


		a{
	        text-decoration: none !important;
		}


		header {
			height: 68px;
			padding: 0 24px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: var(--shadow-sm);
			position: sticky;
			top: 0;
			z-index: 1000;
		}

		/* Верхняя панель: как --surface (светлая / тёмная через html[data-theme]) */
		body > header:first-child {
			background-color: var(--surface);
		}

		.logo-container { display: flex; align-items: center; gap: 20px; }
		.logo {
			font-size: 1.6rem;
			font-weight: 800;
			background: linear-gradient(90deg, var(--primary), var(--accent));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
		}

		.project-name {
			font-size: 0.95rem;
			color: var(--text-secondary);
			cursor: pointer;
			padding: 6px 12px;
			border-radius: var(--radius);
			transition: var(--transition);
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.project-name:hover { background: var(--surface-hover); }

		.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 12px; }

		.search-box { position: relative; }
		.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
		.search-input {
			padding: 10px 16px 10px 40px;
			width: 280px;
			border: 1px solid var(--border);
			border-radius: var(--radius);
			background: var(--surface-hover);
			transition: var(--transition);
		}
		.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,33,182,0.15); outline: none; }

		.btn {
			padding: 10px 11px;
			border-radius: var(--radius);
			cursor: pointer;
			transition: var(--transition);
			border: none;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-weight: 600;
			background: var(--surface-hover);
			color: var(--text);
		}

		.btn:hover { background: rgba(91,33,182,0.1); transform: translateY(-1px); }

		.btn-primary { background: var(--primary); color: white; }
		.btn-primary:hover { background: var(--primary-dark); }

		.btn-icon {
			height: 40px;
			border-radius: 50%;
			background: var(--surface-hover);
			border: none;
			cursor: pointer;
			font-size: 1.1rem;
			color: var(--text-secondary);
		}

		.btn-icon:hover { background: var(--primary-light); color: var(--primary); }

		.device-buttons button.active { background: var(--primary); color: white; }

		.save-status { font-size: 0.85rem; margin-left: 8px; opacity: 0.8; }
		.save-status.saved { color: #10b981; }
		.save-status.unsaved { color: #f59e0b; }
		.save-btn.save-btn-unsaved { color: #fff; border-color: #f59e0b; }
		.save-btn.save-btn-unsaved:hover { background: #d97706; border-color: #d97706; }

		.wp-theme-export-btn.is-loading {
			opacity: 0.65;
			cursor: wait;
		}

		.lang-selector {
			padding: 8px 12px;
			border-radius: var(--radius);
			border: 1px solid var(--border);
			background: var(--surface-hover);
			cursor: pointer;
			font-size: 0.9rem;
		}

		.user-profile {
			position: relative;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 8px 16px;
			border-radius: var(--radius);
			background: var(--surface-hover);
			cursor: pointer;
			transition: var(--transition);
		}

		.user-profile:hover {
			background: rgba(91,33,182,0.1);
			transform: translateY(-1px);
		}

		.avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			object-fit: cover;
			border: 2px solid var(--primary-light);
			transition: var(--transition);
		}

		.user-profile:hover .avatar {
			border-color: var(--primary);
			transform: scale(1.05);
		}

		.user-info {
			display: flex;
			flex-direction: column;
		}

		.user-name {
			font-weight: 600;
			font-size: 0.95rem;
			color: var(--text);
		}

		.user-status {
			font-size: 0.8rem;
			opacity: 0.8;
		}

		.user-status.online {
			color: var(--success);
		}

		.dropdown-arrow {
			font-size: 0.9rem;
			color: var(--text-muted);
			transition: var(--transition);
		}

		.user-profile:hover .dropdown-arrow {
			transform: translateY(2px);
		}

		/* Profile dropdown */
		.profile-dropdown {
			position: absolute;
			top: 100%;
			right: 0;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			min-width: 260px;
			box-shadow: var(--shadow);
			z-index: 100;
			display: none;
			overflow: hidden;
			margin-top: 8px;
		}

		.profile-header {
			padding: 16px;
			display: flex;
			align-items: center;
			gap: 16px;
			border-bottom: 1px solid var(--border);
			background: var(--primary-light);
		}

		.avatar-large {
			width: 64px;
		}

		.profile-info {
			flex: 1;
		}

		.profile-name {
			font-weight: 700;
			font-size: 1.1rem;
		}

		.profile-email {
			font-size: 0.9rem;
			color: var(--text-secondary);
		}

		.profile-menu {
			padding: 8px 0;
		}

		.menu-item {
			padding: 12px 20px;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 0.95rem;
			color: var(--text);
			transition: var(--transition);
		}

		.menu-item:hover {
			background: var(--surface-hover);
		}

		.menu-item.logout {
			color: var(--danger);
		}

		.menu-divider {
			height: 1px;
			background: var(--border);
			margin: 4px 0;
		}

		/* Pages dropdown */
		.pages-dropdown { position: relative; }
		.dropdown-btn { padding-right: 36px; position: relative; }
		.dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: var(--radius);
			min-width: 220px;
			box-shadow: var(--shadow);
			z-index: 100;
			display: none;
			padding: 8px 0;
		}
		.dropdown-item {
			padding: 8px 12px;
			cursor: pointer;
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 0.95rem;
		}
		.dropdown-item-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
		.dropdown-item-delete {
			flex-shrink: 0;
			width: 24px; height: 24px;
			padding: 0;
			border: none;
			background: transparent;
			color: var(--text-muted);
			cursor: pointer;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0.7;
		}
		.dropdown-item-delete:hover { color: #dc3545; opacity: 1; background: rgba(220,53,69,0.1); }
		.dropdown-item:hover { background: var(--surface-hover); }
		.dropdown-item.add-new {
			border-top: 1px solid var(--border);
			color: var(--primary);
			margin-top: 4px;
			padding-top: 12px;
		}

		/* Language: hide extra text */
		[data-lang="ru"] [data-lang="en"],
		[data-lang="en"] [data-lang="ru"] { display: none !important; }

		/* Responsive */
		@media (max-width: 1024px) { .search-input { width: 180px; } }
		@media (max-width: 768px) {
			header { flex-wrap: wrap; height: auto; padding: 12px; }
			.toolbar-left, .toolbar-right { flex-wrap: wrap; justify-content: center; margin-top: 8px; }
			.logo-container { margin-bottom: 8px; width: 100%; justify-content: center; }
		}


.block-center{
	display: flex;
}