heretek-control-core/assets/css/admin.css

/**
 * MCP Tools for Elementor — Admin Settings Styles
 *
 * @package Elementor_MCP
 * @since   1.0.0
 */

/* =========================================================================
 * Fonts — Geist (self-hosted, SIL OFL). Used for headings + accents to match
 * the marketing site; body text stays on the WP system stack. Variable font,
 * one file covers all weights.
 * ========================================================================= */

@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
 * CSS Custom Properties
 * ========================================================================= */

.elementor-mcp-admin {
	--mcp-font-heading: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mcp-primary: #6366f1;
	--mcp-primary-hover: #4f46e5;
	--mcp-primary-light: #eef2ff;
	--mcp-success: #10b981;
	--mcp-success-light: #ecfdf5;
	--mcp-danger: #ef4444;
	--mcp-danger-light: #fef2f2;
	--mcp-warning: #f59e0b;
	--mcp-pro: #8b5cf6;
	--mcp-pro-light: #f5f3ff;
	--mcp-gray-50: #f9fafb;
	--mcp-gray-100: #f3f4f6;
	--mcp-gray-200: #e5e7eb;
	--mcp-gray-300: #d1d5db;
	--mcp-gray-400: #9ca3af;
	--mcp-gray-500: #6b7280;
	--mcp-gray-600: #4b5563;
	--mcp-gray-700: #374151;
	--mcp-gray-800: #1f2937;
	--mcp-gray-900: #111827;
	--mcp-white: #ffffff;
	--mcp-radius: 10px;
	--mcp-radius-sm: 6px;
	--mcp-radius-lg: 14px;
	--mcp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--mcp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--mcp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--mcp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--mcp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Geist on headings + accent text (matches the marketing site); body copy
   stays on the WP system stack for legibility. */
.elementor-mcp-admin h1,
.elementor-mcp-admin h2,
.elementor-mcp-admin h3,
.elementor-mcp-admin .emcp-appbar-title,
.elementor-mcp-admin .elementor-mcp-header-title,
.elementor-mcp-admin .elementor-mcp-section > h2,
.elementor-mcp-admin .elementor-mcp-stat-value,
.elementor-mcp-admin .emcp-dash-section-title,
.elementor-mcp-admin .emcp-dash-stat-value,
.elementor-mcp-admin .emcp-dash-card-title,
.elementor-mcp-admin .emcp-dash-video-title,
.elementor-mcp-admin .emcp-dash-help-title {
	font-family: var(--mcp-font-heading);
	letter-spacing: -0.01em;
}

/* =========================================================================
 * Page Layout & Header
 * ========================================================================= */

.elementor-mcp-admin {
	/* Full-width admin page so the app-bar header can bleed edge-to-edge. */
	max-width: none;
	margin-right: 20px;
}

.elementor-mcp-admin > h1 {
	display: none;
}

.elementor-mcp-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	margin: 20px 0 0;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-lg) var(--mcp-radius-lg) 0 0;
	border-bottom: none;
}

.elementor-mcp-header-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--mcp-radius);
	flex-shrink: 0;
	overflow: hidden;
}

.elementor-mcp-header-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.elementor-mcp-header-info {
	flex: 1;
}

.elementor-mcp-header-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--mcp-gray-900);
	margin: 0;
	line-height: 1.3;
}

.elementor-mcp-header-version {
	font-size: 12px;
	font-weight: 500;
	color: var(--mcp-gray-400);
	margin-left: 8px;
}

.elementor-mcp-header-subtitle {
	font-size: 13px;
	color: var(--mcp-gray-500);
	margin: 2px 0 0;
}

.elementor-mcp-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
}

.elementor-mcp-header-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--mcp-radius-sm);
	text-decoration: none;
	transition: all var(--mcp-transition);
	white-space: nowrap;
	line-height: 1.4;
}

.elementor-mcp-header-btn svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

.elementor-mcp-header-btn--secondary {
	background: var(--mcp-white);
	color: var(--mcp-gray-600);
	border: 1px solid var(--mcp-gray-300);
}

.elementor-mcp-header-btn--secondary:hover {
	background: var(--mcp-gray-50);
	border-color: var(--mcp-gray-400);
	color: var(--mcp-gray-700);
}

.elementor-mcp-header-btn--primary {
	background: var(--mcp-primary);
	color: var(--mcp-white);
	border: 1px solid var(--mcp-primary);
}

.elementor-mcp-header-btn--primary:hover {
	background: var(--mcp-primary-hover);
	border-color: var(--mcp-primary-hover);
	color: var(--mcp-white);
	box-shadow: var(--mcp-shadow-md);
}

/* =========================================================================
 * Stats Bar
 * ========================================================================= */

.elementor-mcp-stats {
	display: flex;
	gap: 12px;
	padding: 16px 22px;
	background: var(--mcp-gray-50);
	border-bottom: 1px solid var(--mcp-gray-200);
	margin: 0 -20px 20px -22px;
	overflow-x: auto;
}

.elementor-mcp-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: var(--mcp-white);
	border-radius: var(--mcp-radius-sm);
	border: 1px solid var(--mcp-gray-200);
	min-width: 0;
}

.elementor-mcp-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	flex-shrink: 0;
}

.elementor-mcp-stat-icon--tools {
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
}

.elementor-mcp-stat-icon--active {
	background: var(--mcp-success-light);
	color: var(--mcp-success);
}

.elementor-mcp-stat-icon--pro {
	background: var(--mcp-pro-light);
	color: var(--mcp-pro);
}

.elementor-mcp-stat-icon--prompts {
	background: #fef3c7;
	color: var(--mcp-warning);
}

.elementor-mcp-stat-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.elementor-mcp-stat-content {
	min-width: 0;
}

.elementor-mcp-stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--mcp-gray-900);
	line-height: 1.2;
}

.elementor-mcp-stat-label {
	font-size: 12px;
	color: var(--mcp-gray-500);
	white-space: nowrap;
}

/* =========================================================================
 * Tab Navigation
 * ========================================================================= */

.elementor-mcp-admin .nav-tab-wrapper {
	border: 1px solid var(--mcp-gray-200);
	border-top: none;
	border-bottom: 2px solid var(--mcp-gray-200);
	padding: 0 24px;
	margin: 0;
	background: var(--mcp-white);
	display: flex;
	gap: 0;
}

.elementor-mcp-admin .nav-tab {
	border: none;
	border-bottom: 2px solid transparent;
	margin: 0 0 -2px;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--mcp-gray-500);
	background: transparent;
	transition: color var(--mcp-transition), border-color var(--mcp-transition);
}

.elementor-mcp-admin .nav-tab:hover {
	color: var(--mcp-gray-700);
	background: transparent;
}

.elementor-mcp-admin .nav-tab-active,
.elementor-mcp-admin .nav-tab-active:hover,
.elementor-mcp-admin .nav-tab-active:focus {
	color: var(--mcp-primary);
	border-bottom-color: var(--mcp-primary);
	background: transparent;
	box-shadow: none;
}

/* =========================================================================
 * Tab Content
 * ========================================================================= */

.elementor-mcp-admin .tab-content {
	margin-top: 0;
	padding: 24px;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-top: none;
	border-radius: var(--mcp-radius-lg);
}

/* =========================================================================
 * Bulk Actions
 * ========================================================================= */

.elementor-mcp-bulk-actions {
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Tool-count summary sits at the left of the bar; its auto right-margin pushes
   the action buttons over to the right edge — count left, buttons right, one row. */
.elementor-mcp-bulk-actions .elementor-mcp-tools-summary {
	margin: 0 auto 0 0;
}

/* Secondary buttons (Enable All / Disable All) — match the plugin's header
   buttons (flat, neutral) instead of WordPress's blue defaults. */
.elementor-mcp-bulk-actions .button {
	padding: 8px 16px;
	font-size: 14px;
	line-height: 1.3;
	height: auto;
	min-height: 0;
	border-radius: var(--mcp-radius-sm);
	background: var(--mcp-white);
	color: var(--mcp-gray-600);
	border: 1px solid var(--mcp-gray-300);
	box-shadow: none;
	text-shadow: none;
	transition: all var(--mcp-transition);
}

.elementor-mcp-bulk-actions .button:hover,
.elementor-mcp-bulk-actions .button:focus {
	background: var(--mcp-gray-50);
	border-color: var(--mcp-gray-400);
	color: var(--mcp-gray-700);
}

/* Primary "Save Changes" — the brand indigo fill. A small extra gap sets it
   apart from the Enable/Disable pair. */
.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save {
	margin-left: 0px;
	background: var(--mcp-primary);
	border-color: var(--mcp-primary);
	color: var(--mcp-white);
}

.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save:hover,
.elementor-mcp-bulk-actions .button.elementor-mcp-bulk-save:focus {
	background: var(--mcp-primary-hover);
	border-color: var(--mcp-primary-hover);
	color: var(--mcp-white);
}

/* =========================================================================
 * Category Sections
 * ========================================================================= */

.elementor-mcp-category {
	margin-bottom: 28px;
}

.elementor-mcp-category:last-of-type {
	margin-bottom: 0;
}

.elementor-mcp-category-header {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--mcp-gray-200);
	margin: 0;
}

/* The collapse/expand trigger: chevron + title + count, fills the row. */
.elementor-mcp-category-toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 8px 8px 12px 6px;
	background: none;
	border: 0;
	border-radius: 6px 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-800);
	text-align: left;
	cursor: pointer;
	transition: background var(--mcp-transition);
}

.elementor-mcp-category-toggle:hover {
	background: var(--mcp-gray-50);
}

.elementor-mcp-category-toggle:focus-visible {
	outline: 2px solid var(--mcp-primary);
	outline-offset: -2px;
}

.elementor-mcp-category-chevron {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--mcp-gray-400);
	transition: transform var(--mcp-transition);
}

.elementor-mcp-category.is-collapsed .elementor-mcp-category-chevron {
	transform: rotate(-90deg);
}

.elementor-mcp-category-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.elementor-mcp-category-count {
	flex-shrink: 0;
	color: var(--mcp-gray-500);
	font-weight: 500;
	font-size: 12px;
	background: var(--mcp-gray-100);
	padding: 2px 8px;
	border-radius: 10px;
}

/* Collapsed: hide the tool grid. */
.elementor-mcp-category.is-collapsed .elementor-mcp-tools-grid {
	display: none;
}

/* ---- Plugin integration groups (Plugins tab) ---------------------------- */
/* Each group clusters related integrations (Dynamic Content, E-Commerce, …);
   inside a group every plugin becomes a self-contained card so the tab stays
   organized as integrations grow. */
.elementor-mcp-plugin-group {
	margin: 0 0 32px;
}
.elementor-mcp-plugin-group:last-child {
	margin-bottom: 0;
}
.elementor-mcp-plugin-group-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}
.elementor-mcp-plugin-group-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mcp-gray-800);
}
.elementor-mcp-plugin-group-desc {
	font-size: 12.5px;
	color: var(--mcp-gray-500);
}
.elementor-mcp-plugin-group-count {
	margin-left: auto;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--mcp-gray-500);
	font-variant-numeric: tabular-nums;
	background: var(--mcp-gray-100);
	padding: 2px 8px;
	border-radius: 10px;
}
/* Two plugin cards per row on wide screens; a lone card fills the row. */
.elementor-mcp-plugin-group-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 14px;
}
.elementor-mcp-plugin-group-body .elementor-mcp-category {
	margin: 0;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-lg);
	padding: 4px 14px 12px;
}
/* Slimmer toggle cards inside a plugin card: stack one-per-row, tighter. */
.elementor-mcp-plugin-group-body .elementor-mcp-tools-grid.is-two-up {
	grid-template-columns: 1fr;
	gap: 10px;
}
.elementor-mcp-plugin-group-body .elementor-mcp-tool-card {
	padding: 12px;
}
@media screen and (max-width: 782px) {
	.elementor-mcp-plugin-group-body {
		grid-template-columns: 1fr;
	}
}

/* Segmented All / None control. */
.elementor-mcp-cat-toggle-group {
	display: inline-flex;
	flex-shrink: 0;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: 8px;
	overflow: hidden;
}

.elementor-mcp-cat-btn {
	appearance: none;
	margin: 0;
	border: 0;
	background: none;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--mcp-gray-600);
	cursor: pointer;
	transition: background var(--mcp-transition), color var(--mcp-transition);
}

.elementor-mcp-cat-btn + .elementor-mcp-cat-btn {
	border-left: 1px solid var(--mcp-gray-200);
}

.elementor-mcp-cat-enable-all:hover {
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
}

.elementor-mcp-cat-disable-all:hover {
	background: var(--mcp-gray-100);
	color: var(--mcp-gray-800);
}

.elementor-mcp-cat-btn:focus-visible {
	outline: 2px solid var(--mcp-primary);
	outline-offset: -2px;
}

/* =========================================================================
 * Tool Cards Grid
 * ========================================================================= */

.elementor-mcp-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.elementor-mcp-tool-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	cursor: pointer;
	transition: all var(--mcp-transition);
	position: relative;
}

.elementor-mcp-tool-card:hover {
	border-color: var(--mcp-primary);
	box-shadow: var(--mcp-shadow-sm);
}

.elementor-mcp-tool-card.is-enabled {
	background: var(--mcp-white);
	border-color: var(--mcp-gray-200);
}

.elementor-mcp-tool-card.is-disabled {
	background: var(--mcp-gray-50);
	opacity: 0.6;
}

.elementor-mcp-tool-card.is-disabled:hover {
	opacity: 0.85;
}

/* Hide the native checkbox */
.elementor-mcp-tool-card input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* =========================================================================
 * Toggle Switch
 * ========================================================================= */

.elementor-mcp-toggle {
	position: relative;
	width: 38px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 1px;
}

.elementor-mcp-toggle-track {
	display: block;
	width: 38px;
	height: 22px;
	background: var(--mcp-gray-300);
	border-radius: 11px;
	transition: background var(--mcp-transition);
	position: relative;
}

.elementor-mcp-toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--mcp-white);
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: transform var(--mcp-transition);
}

/* Enabled state */
.elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track {
	background: var(--mcp-primary);
}

.elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track::after {
	transform: translateX(16px);
}

/* Focus state for accessibility */
.elementor-mcp-tool-card input[type="checkbox"]:focus-visible ~ .elementor-mcp-toggle .elementor-mcp-toggle-track {
	box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary);
}

/* Danger sections (Filesystem / Database) — powerful, sensitive capabilities.
   A flat light-red zone with red toggles signals the elevated risk. */
.elementor-mcp-category.is-danger {
	background: var(--mcp-danger-light);
	border: 1px solid #fecaca;
	border-left: 3px solid var(--mcp-danger);
	border-radius: var(--mcp-radius, 8px);
	padding: 16px 18px;
}
.elementor-mcp-category.is-danger .elementor-mcp-category-title,
.elementor-mcp-category.is-danger .elementor-mcp-category-chevron {
	color: var(--mcp-danger);
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card {
	background: var(--mcp-white);
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-enabled .elementor-mcp-toggle-track {
	background: var(--mcp-danger);
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card input[type="checkbox"]:focus-visible ~ .elementor-mcp-toggle .elementor-mcp-toggle-track {
	box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-danger);
}
/* Danger-section polish: deeper title, warm borders, red-tinted header hover +
   count badge, and disabled cards that read against the red zone. */
.elementor-mcp-category.is-danger .elementor-mcp-category-title,
.elementor-mcp-category.is-danger .elementor-mcp-category-chevron {
	color: #dc2626;
}
.elementor-mcp-category.is-danger .elementor-mcp-category-header {
	border-bottom-color: #fecaca;
}
.elementor-mcp-category.is-danger .elementor-mcp-category-toggle:hover {
	background: #fde4e4;
}
.elementor-mcp-category.is-danger .elementor-mcp-category-count {
	background: #fde4e4;
	color: #b91c1c;
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card,
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-enabled {
	border-color: #fecaca;
}
/* Disabled cards in danger sections: keep them on white so they read as cards
   against the pink zone, and dim only gently (the global 0.6 opacity washes the
   text out on the tint). The gray toggle still signals the off state. */
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled {
	background: var(--mcp-white);
	opacity: 0.85;
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled .elementor-mcp-tool-name {
	color: var(--mcp-gray-900);
}
.elementor-mcp-category.is-danger .elementor-mcp-tool-card.is-disabled .elementor-mcp-tool-desc {
	color: var(--mcp-gray-600);
}

/* =========================================================================
 * Tool Info
 * ========================================================================= */

.elementor-mcp-tool-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1;
}

.elementor-mcp-tool-name {
	font-weight: 600;
	font-size: 13px;
	color: var(--mcp-gray-800);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	line-height: 1.4;
}

.elementor-mcp-tool-desc {
	color: var(--mcp-gray-500);
	font-size: 12px;
	line-height: 1.5;
}

.elementor-mcp-tool-slug {
	font-size: 11px;
	color: var(--mcp-gray-400);
	background: var(--mcp-gray-100);
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Plugin-integration categories: "how it works" note + two-up cards + operation pills */
.elementor-mcp-cat-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--mcp-primary-light);
	border: 1px solid var(--mcp-gray-200);
	border-left: 3px solid var(--mcp-primary);
	border-radius: var(--mcp-radius-sm);
	color: var(--mcp-gray-700);
	font-size: 12px;
	line-height: 1.55;
}

.elementor-mcp-cat-note-icon {
	color: var(--mcp-primary);
	flex-shrink: 0;
	margin-top: 1px;
	line-height: 0;
}

/* Tab-level variant: pinned to the top of the tab, above all category sections */
.elementor-mcp-tab-note {
	margin: 0 0 18px;
}

.elementor-mcp-tools-grid.is-two-up {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 782px) {
	.elementor-mcp-tools-grid.is-two-up {
		grid-template-columns: 1fr;
	}
}

.elementor-mcp-tool-ops {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 8px;
}

.elementor-mcp-tool-ops-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mcp-gray-400);
}

.elementor-mcp-op-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.elementor-mcp-op-pill {
	font-size: 11px;
	line-height: 1.4;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: var(--mcp-gray-600);
	background: var(--mcp-gray-100);
	border: 1px solid var(--mcp-gray-200);
	padding: 2px 8px;
	border-radius: 999px;
}

.elementor-mcp-tool-card.is-enabled .elementor-mcp-op-pill {
	color: var(--mcp-primary-hover);
	background: var(--mcp-primary-light);
	border-color: #dfe3ff;
}

/* =========================================================================
 * Badges
 * ========================================================================= */

.elementor-mcp-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.7;
}

.elementor-mcp-badge--read-only {
	background: #dbeafe;
	color: #1d4ed8;
}

.elementor-mcp-badge--destructive {
	background: var(--mcp-danger-light);
	color: var(--mcp-danger);
}

.elementor-mcp-badge--pro {
	background: var(--mcp-pro-light);
	color: var(--mcp-pro);
}

/* "Elementor Pro" — distinct from the EMCP "PRO" badge. Marks tools that need
   Elementor Pro (widget shortcuts, theme builder, popups, Pro custom code),
   not the EMCP Tools Pro license. Pink reads as Elementor; lowercase keeps it
   readable as a dependency note rather than a plan badge. */
.elementor-mcp-badge--elementor-pro {
	background: #fce7f3;
	color: #be185d;
	text-transform: none;
	letter-spacing: 0;
}

.elementor-mcp-badge--free {
	background: var(--mcp-success-light);
	color: var(--mcp-success);
}

/* =========================================================================
 * Save Button
 * ========================================================================= */

.elementor-mcp-admin .submit {
	margin-top: 8px;
	padding: 0;
	border-top: 1px solid var(--mcp-gray-200);
	padding-top: 20px;
}

.elementor-mcp-admin .submit #submit {
	background: var(--mcp-primary);
	border-color: var(--mcp-primary);
	color: var(--mcp-white);
	padding: 8px 24px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--mcp-radius-sm);
	transition: all var(--mcp-transition);
	text-shadow: none;
	box-shadow: none;
	height: auto;
	line-height: 1.5;
}

.elementor-mcp-admin .submit #submit:hover {
	background: var(--mcp-primary-hover);
	border-color: var(--mcp-primary-hover);
}

/* =========================================================================
 * Connection Page
 * ========================================================================= */

.elementor-mcp-connection {
	max-width: 100%;
}

.elementor-mcp-section {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--mcp-gray-200);
}

.elementor-mcp-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.elementor-mcp-section > h2 {
	font-size: 16px;
	font-weight: 600;
	color: var(--mcp-gray-800);
	margin: 0 0 8px;
}

.elementor-mcp-section > p.description {
	color: var(--mcp-gray-500);
	font-size: 13px;
	margin: 0 0 16px;
}

.elementor-mcp-section h3 {
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-700);
	margin: 20px 0 8px;
}

.elementor-mcp-section h4 {
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-700);
	margin: 20px 0 4px;
}

/* =========================================================================
 * Status Cards (Connection Tab)
 * ========================================================================= */

.elementor-mcp-status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin-bottom: 8px;
}

.elementor-mcp-status-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
}

.elementor-mcp-status-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	flex-shrink: 0;
}

.elementor-mcp-status-card-icon--ok {
	background: var(--mcp-success-light);
	color: var(--mcp-success);
}

.elementor-mcp-status-card-icon--warn {
	background: var(--mcp-danger-light);
	color: var(--mcp-danger);
}

.elementor-mcp-status-card-icon svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.elementor-mcp-status-card-info {
	min-width: 0;
}

.elementor-mcp-status-card-label {
	font-size: 12px;
	color: var(--mcp-gray-500);
}

.elementor-mcp-status-card-value {
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-800);
}

/* Legacy status badges — still used in status table fallback */
.elementor-mcp-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
}

.elementor-mcp-status--active {
	background: var(--mcp-success-light);
	color: #059669;
}

.elementor-mcp-status--inactive {
	background: var(--mcp-danger-light);
	color: var(--mcp-danger);
}

/* =========================================================================
 * Endpoint URL
 * ========================================================================= */

.elementor-mcp-endpoint {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-sm);
	margin: 12px 0 0;
}

.elementor-mcp-endpoint code {
	font-size: 12px;
	color: var(--mcp-gray-700);
	background: none;
	padding: 0;
	word-break: break-all;
	flex: 1;
}

.elementor-mcp-endpoint .elementor-mcp-copy-btn {
	position: static;
	background: var(--mcp-white) !important;
	border: 1px solid var(--mcp-gray-300) !important;
	color: var(--mcp-gray-600) !important;
	font-size: 11px !important;
	padding: 3px 10px !important;
	min-height: auto !important;
	border-radius: 4px !important;
	flex-shrink: 0;
}

.elementor-mcp-endpoint .elementor-mcp-copy-btn:hover {
	background: var(--mcp-gray-100) !important;
	border-color: var(--mcp-gray-400) !important;
}

/* =========================================================================
 * Credential Form
 * ========================================================================= */

.elementor-mcp-cred-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 500px;
}

.elementor-mcp-cred-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.elementor-mcp-cred-field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--mcp-gray-700);
}

.elementor-mcp-cred-field input {
	padding: 8px 12px;
	border: 1px solid var(--mcp-gray-300);
	border-radius: var(--mcp-radius-sm);
	font-size: 13px;
	transition: border-color var(--mcp-transition), box-shadow var(--mcp-transition);
	width: 100%;
	box-sizing: border-box;
}

.elementor-mcp-cred-field input:focus {
	border-color: var(--mcp-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
	outline: none;
}

.elementor-mcp-cred-field .description {
	font-size: 12px;
	color: var(--mcp-gray-400);
	margin: 0;
}

.elementor-mcp-generate-btn {
	align-self: flex-start;
	background: var(--mcp-primary) !important;
	border-color: var(--mcp-primary) !important;
	color: var(--mcp-white) !important;
	padding: 8px 20px !important;
	border-radius: var(--mcp-radius-sm) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	transition: all var(--mcp-transition) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	height: auto !important;
	line-height: 1.5 !important;
}

.elementor-mcp-generate-btn:hover {
	background: var(--mcp-primary-hover) !important;
	border-color: var(--mcp-primary-hover) !important;
}

/* Auth result */
.elementor-mcp-auth-result {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--mcp-success-light);
	border: 1px solid #a7f3d0;
	border-radius: var(--mcp-radius-sm);
	margin-top: 4px;
}

.elementor-mcp-auth-result code {
	font-size: 12px;
	color: var(--mcp-gray-700);
	background: none;
	word-break: break-all;
	flex: 1;
}

.elementor-mcp-auth-result .elementor-mcp-copy-btn {
	position: static;
	background: var(--mcp-white) !important;
	border: 1px solid #a7f3d0 !important;
	color: #059669 !important;
	font-size: 11px !important;
	padding: 3px 10px !important;
	min-height: auto !important;
	border-radius: 4px !important;
	flex-shrink: 0;
}

/* =========================================================================
 * Config Code Blocks
 * ========================================================================= */

.elementor-mcp-config-card {
	margin: 12px 0 20px;
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	overflow: hidden;
}

/* Client-specific setup guide (e.g. Codex custom-MCP form field mapping). */
.emcp-conn-guide {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin: 6px 0 2px;
}
.emcp-conn-guide th {
	text-align: left;
	white-space: nowrap;
	padding: 6px 14px 6px 0;
	color: var(--mcp-gray-800, #1d2327);
	font-weight: 600;
	vertical-align: top;
	width: 1%;
}
.emcp-conn-guide td {
	padding: 6px 0;
	color: var(--mcp-gray-600, #50575e);
	vertical-align: top;
}
.emcp-conn-guide code {
	background: var(--mcp-gray-100, #f0f0f1);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 12px;
}

.elementor-mcp-config-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--mcp-gray-50);
	border-bottom: 1px solid var(--mcp-gray-200);
}

.elementor-mcp-config-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-700);
}

.elementor-mcp-config-card-header .elementor-mcp-copy-btn {
	position: static;
	background: var(--mcp-white) !important;
	border: 1px solid var(--mcp-gray-300) !important;
	color: var(--mcp-gray-600) !important;
	font-size: 11px !important;
	padding: 3px 12px !important;
	min-height: auto !important;
	border-radius: 4px !important;
}

.elementor-mcp-config-card-header .elementor-mcp-copy-btn:hover {
	background: var(--mcp-gray-100) !important;
	border-color: var(--mcp-gray-400) !important;
}

.elementor-mcp-config-card-body {
	padding: 14px 16px;
}
.elementor-mcp-config-card-body > :first-child {
	margin-top: 0;
}
.elementor-mcp-config-card-body > :last-child {
	margin-bottom: 0;
}

.elementor-mcp-config-card pre {
	margin: 0;
	padding: 14px 16px;
	background: var(--mcp-gray-900);
	color: #e2e8f0;
	font-size: 12px;
	line-height: 1.6;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-all;
}

.elementor-mcp-config-card code {
	background: none;
	color: inherit;
	font-size: inherit;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Legacy code block style — kept for backward compat */
.elementor-mcp-code-block {
	position: relative;
	margin: 8px 0 16px;
}

.elementor-mcp-code-block pre {
	background: var(--mcp-gray-900);
	color: #e2e8f0;
	padding: 14px 16px;
	border-radius: var(--mcp-radius-sm);
	overflow-x: auto;
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-all;
}

.elementor-mcp-code-block code {
	background: none;
	color: inherit;
	font-size: inherit;
}

/* Copy button — generic */
.elementor-mcp-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 11px !important;
	padding: 3px 10px !important;
	min-height: 24px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
	color: #e2e8f0 !important;
	border-radius: 4px !important;
	cursor: pointer;
	/* Specific properties only — `transition: all` on 50+ buttons makes hover/focus jank. */
	transition: background-color var(--mcp-transition), border-color var(--mcp-transition), color var(--mcp-transition) !important;
}

.elementor-mcp-copy-btn:hover {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
}

/* Hidden textarea for copy source.
 * MUST be display:none, not just off-screen. An off-screen textarea
 * (left:-9999px; width:1px) is still in the layout tree, so the browser
 * reflows its full multi-KB value wrapped into a 1px-wide column. With 50+
 * prompt cards that pathological reflow froze the whole tab for seconds on
 * the Prompts page. display:none removes it from layout entirely; reading
 * .value (used by the copy handler) still works. */
.elementor-mcp-copy-source {
	display: none;
}

/* =========================================================================
 * Tools Summary (beneath bulk actions)
 * ========================================================================= */

.elementor-mcp-tools-summary {
	font-size: 13px;
	color: var(--mcp-gray-500);
	margin: 0 0 16px;
}

.elementor-mcp-tools-summary strong {
	color: var(--mcp-gray-700);
}

/* =========================================================================
 * Low-tools mode card
 * ========================================================================= */

/* Top-of-Tools mode cards laid out two-up (Compact tool mode + Themer PHP);
   a single card still fills the row when the other isn't shown. */
.elementor-mcp-mode-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.elementor-mcp-mode-cards .elementor-mcp-low-mode-card {
	margin: 0;
}

.elementor-mcp-low-mode-card {
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
	background: #fff;
	padding: 14px 18px;
	margin: 0 0 20px;
	transition: all var(--mcp-transition);
}

.elementor-mcp-low-mode-card:has(input[type="checkbox"]:checked) {
	border-color: var(--mcp-primary, #4f46e5);
	background: rgba(79, 70, 229, 0.04);
}

.elementor-mcp-low-mode-toggle {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: pointer;
}

.elementor-mcp-low-mode-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Drive the toggle pill from the checkbox sibling state. */
.elementor-mcp-low-mode-toggle input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track {
	background: var(--mcp-primary);
}

.elementor-mcp-low-mode-toggle input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track::after {
	transform: translateX(16px);
}

.elementor-mcp-low-mode-toggle input[type="checkbox"]:focus-visible + .elementor-mcp-toggle .elementor-mcp-toggle-track {
	box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary);
}

.elementor-mcp-low-mode-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.elementor-mcp-low-mode-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--mcp-gray-700);
}

.elementor-mcp-low-mode-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--mcp-gray-500);
}

/* =========================================================================
 * Premium prompts library
 * ========================================================================= */
.elementor-mcp-pro-prompts-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.elementor-mcp-pro-prompts-heading h2 {
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.elementor-mcp-pro-prompts-heading .description {
	margin: 0;
}

/* Big "N Agent Skills" count in the Skills-tab header (sits to the right) */
.elementor-mcp-skills .elementor-mcp-pro-prompts-heading {
	flex: 1 1 360px;
	min-width: 0;
}

.emcp-skills-count {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 108px;
	padding: 12px 24px;
	background: var(--mcp-primary-light);
	border: 1px solid #e0e3ff;
	border-radius: var(--mcp-radius-lg);
	text-align: center;
}

.emcp-skills-count__num {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--mcp-primary-hover);
}

.emcp-skills-count__label {
	margin-top: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--mcp-primary);
}

.elementor-mcp-pro-prompts-meta {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	color: var(--mcp-gray-500);
}

/* The element this targets is a <button class="button elementor-mcp-pro-sync-btn">.
 * WP's core admin button rules are namespaced under `.wp-core-ui .button`
 * (specificity 0,2,0), so we match that prefix to win the cascade without
 * needing !important. .wp-core-ui is always present on the admin body. */
.wp-core-ui button.elementor-mcp-pro-sync-btn,
.wp-core-ui .elementor-mcp-pro-sync-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	min-height: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--mcp-primary, #6366f1);
	border: 1px solid var(--mcp-primary, #6366f1);
	border-radius: var(--mcp-radius-sm, 6px);
	box-shadow: none;
	cursor: pointer;
	text-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.wp-core-ui button.elementor-mcp-pro-sync-btn:hover,
.wp-core-ui button.elementor-mcp-pro-sync-btn:focus,
.wp-core-ui .elementor-mcp-pro-sync-btn:hover,
.wp-core-ui .elementor-mcp-pro-sync-btn:focus {
	background: var(--mcp-primary-hover, #4f46e5);
	border-color: var(--mcp-primary-hover, #4f46e5);
	color: #fff;
	box-shadow: none;
}

.wp-core-ui button.elementor-mcp-pro-sync-btn:active,
.wp-core-ui .elementor-mcp-pro-sync-btn:active {
	transform: translateY(1px);
	background: var(--mcp-primary-hover, #4f46e5);
	border-color: var(--mcp-primary-hover, #4f46e5);
	color: #fff;
	box-shadow: none;
}

.wp-core-ui button.elementor-mcp-pro-sync-btn:focus-visible,
.wp-core-ui .elementor-mcp-pro-sync-btn:focus-visible {
	outline: 2px solid var(--mcp-primary, #6366f1);
	outline-offset: 2px;
}

.wp-core-ui button.elementor-mcp-pro-sync-btn:disabled,
.wp-core-ui button.elementor-mcp-pro-sync-btn[disabled],
.wp-core-ui .elementor-mcp-pro-sync-btn:disabled {
	opacity: 0.7;
	cursor: progress;
	background: var(--mcp-primary, #6366f1);
	border-color: var(--mcp-primary, #6366f1);
	color: #fff;
}

.wp-core-ui .elementor-mcp-pro-sync-btn .dashicons,
.wp-core-ui .elementor-mcp-pro-sync-btn:hover .dashicons,
.wp-core-ui .elementor-mcp-pro-sync-btn:focus .dashicons,
.wp-core-ui .elementor-mcp-pro-sync-btn:active .dashicons {
	font-size: 16px;
	line-height: 1;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #fff !important;
}

.elementor-mcp-pro-sync-btn .spin {
	animation: elementor-mcp-spin 1s linear infinite;
}

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

.elementor-mcp-pro-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.elementor-mcp-pro-filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--mcp-gray-200);
	background: #fff;
	border-radius: 999px;
	font-size: 13px;
	color: var(--mcp-gray-700, #374151);
	cursor: pointer;
	transition: background-color var(--mcp-transition), border-color var(--mcp-transition), color var(--mcp-transition);
}

.elementor-mcp-pro-filter:hover {
	border-color: var(--mcp-primary, #4f46e5);
	color: var(--mcp-primary, #4f46e5);
}

.elementor-mcp-pro-filter.is-active {
	background: var(--mcp-primary, #4f46e5);
	border-color: var(--mcp-primary, #4f46e5);
	color: #fff;
}

.elementor-mcp-pro-filter-count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.elementor-mcp-pro-filter.is-active .elementor-mcp-pro-filter-count {
	background: rgba(255, 255, 255, 0.22);
}

.elementor-mcp-pro-prompt-card {
	position: relative;
}

/* =========================================================================
 * Skills page — download CTA + per-client install guides
 * ========================================================================= */

.elementor-mcp-skills-download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--mcp-primary, #6366f1);
	border: 1px solid var(--mcp-primary, #6366f1);
	border-radius: var(--mcp-radius-sm, 6px);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	flex-shrink: 0;
}

.elementor-mcp-skills-download:hover,
.elementor-mcp-skills-download:focus {
	background: var(--mcp-primary-hover, #4f46e5);
	border-color: var(--mcp-primary-hover, #4f46e5);
	color: #fff;
}

.elementor-mcp-skills-download:active {
	transform: translateY(1px);
}

.elementor-mcp-skills-download:focus-visible {
	outline: 2px solid var(--mcp-primary, #6366f1);
	outline-offset: 2px;
}

.elementor-mcp-skills-download svg {
	flex-shrink: 0;
}

/* Two download buttons side by side (folder bundle + Claude Desktop bundle). */
.emcp-skills-download-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Secondary (Claude Desktop) button: outlined so the folder bundle stays primary. */
.elementor-mcp-skills-download--alt {
	color: var(--mcp-primary, #6366f1);
	background: transparent;
}

.elementor-mcp-skills-download--alt:hover,
.elementor-mcp-skills-download--alt:focus {
	color: #fff;
	background: var(--mcp-primary, #6366f1);
	border-color: var(--mcp-primary, #6366f1);
}

/* Industry skill packs */
.elementor-mcp-skills-packs {
	margin: 0 0 22px;
	padding: 18px 20px;
	background: var(--mcp-gray-50, #f9fafb);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
}

.elementor-mcp-skills-packs__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--mcp-gray-900, #111827);
}

.elementor-mcp-skills-packs .description {
	margin: 0 0 14px;
	max-width: 100%;
}

.elementor-mcp-skills-packs__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-mcp-skills-pack {
	margin: 0;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid var(--mcp-gray-200);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--mcp-gray-700, #374151);
}

.elementor-mcp-skills-guides {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

.elementor-mcp-skills-guide {
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
	background: #fff;
	overflow: hidden;
}

.elementor-mcp-skills-guide > summary {
	cursor: pointer;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--mcp-gray-700, #374151);
	list-style: none;
	position: relative;
	padding-right: 40px;
}

.elementor-mcp-skills-guide > summary::-webkit-details-marker {
	display: none;
}

.elementor-mcp-skills-guide > summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 400;
	color: var(--mcp-gray-500);
	transition: transform var(--mcp-transition);
}

.elementor-mcp-skills-guide[open] > summary::after {
	content: '\2212';
}

.elementor-mcp-skills-guide__hint {
	font-size: 12px;
	color: var(--mcp-gray-500);
	font-weight: 400;
	margin-left: auto;
	padding-right: 8px;
}

.elementor-mcp-skills-guide__body {
	padding: 0 18px 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mcp-gray-700, #374151);
	border-top: 1px solid var(--mcp-gray-100);
	padding-top: 14px;
}

.elementor-mcp-skills-guide__body p { margin: 0 0 10px; }
.elementor-mcp-skills-guide__body ol,
.elementor-mcp-skills-guide__body ul { margin: 8px 0 8px 22px; padding: 0; }
.elementor-mcp-skills-guide__body ol > li,
.elementor-mcp-skills-guide__body ul > li { margin: 6px 0; }
.elementor-mcp-skills-guide__body ul ul { margin-top: 4px; }
.elementor-mcp-skills-guide__body code {
	font-size: 12.5px;
	padding: 1px 6px;
	background: var(--mcp-gray-100);
	border-radius: 4px;
	color: var(--mcp-gray-800, #1f2937);
}

/* =========================================================================
 * Skills page — "Two ways to use these skills" callout
 * ========================================================================= */

.emcp-skills-ways {
	margin: 20px 0 24px;
}

.emcp-skills-ways__title {
	margin: 0 0 12px;
	font-family: var(--mcp-font-heading, inherit);
	font-size: 15px;
	font-weight: 700;
	color: var(--mcp-gray-900, #111827);
}

.emcp-skills-ways__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 782px) {
	.emcp-skills-ways__grid {
		grid-template-columns: 1fr;
	}
}

.emcp-skills-way {
	display: flex;
	flex-direction: column;
	padding: 18px;
	background: var(--mcp-white, #fff);
	border: 1px solid var(--mcp-gray-200, #e5e7eb);
	border-radius: var(--mcp-radius-md, 8px);
}

.emcp-skills-way--runtime {
	border-color: var(--mcp-primary, #6366f1);
	background: var(--mcp-primary-light, #eef2ff);
}

.emcp-skills-way__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.emcp-skills-way__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--mcp-white, #fff);
	background: var(--mcp-primary, #6366f1);
	border-radius: 50%;
}

.emcp-skills-way__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-900, #111827);
}

.emcp-skills-way__badge {
	margin-left: auto;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mcp-success, #16a34a);
	background: var(--mcp-success-light, #dcfce7);
	border-radius: var(--mcp-radius-sm, 6px);
}

/* Offline state — module and/or MCP server off */
.emcp-skills-way__badge.is-offline {
	color: var(--mcp-danger, #dc2626);
	background: var(--mcp-danger-light, #fee2e2);
}

.emcp-skills-way__desc {
	flex: 1 1 auto;
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mcp-gray-600, #4b5563);
}

.emcp-skills-way__status {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
}

.emcp-skills-way__status.is-on {
	color: var(--mcp-success, #16a34a);
}

.emcp-skills-way__status.is-off {
	color: var(--mcp-gray-600, #4b5563);
}

.emcp-skills-way__dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: currentColor;
}

.emcp-skills-way__status a {
	color: var(--mcp-primary, #6366f1);
}

/* =========================================================================
 * Templates page — "more coming" inline notice
 * ========================================================================= */

.elementor-mcp-coming-soon {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	margin: 0 0 20px;
	background: var(--mcp-primary-light, #eef2ff);
	border: 1px solid var(--mcp-gray-200);
	border-left: 3px solid var(--mcp-primary, #6366f1);
	border-radius: var(--mcp-radius-md, 8px);
	font-size: 13px;
	line-height: 1.5;
	color: var(--mcp-gray-700, #374151);
}

.elementor-mcp-coming-soon__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--mcp-primary, #6366f1);
	margin-top: 1px;
}

.elementor-mcp-coming-soon__text {
	min-width: 0;
}

.elementor-mcp-coming-soon__text strong {
	display: inline;
	margin-right: 4px;
	color: var(--mcp-gray-700, #374151);
}

/* =========================================================================
 * Premium templates grid
 * ========================================================================= */

.elementor-mcp-template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 8px;
}

.elementor-mcp-template-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
	background: #fff;
	overflow: hidden;
	transition: border-color var(--mcp-transition);
}

.elementor-mcp-template-card:hover {
	border-color: var(--mcp-gray-400);
}

.elementor-mcp-template-thumb {
	aspect-ratio: 16 / 10;
	background: var(--mcp-gray-100);
	overflow: hidden;
}

.elementor-mcp-template-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor-mcp-template-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.elementor-mcp-template-thumb--placeholder svg {
	width: 48px;
	height: 48px;
	fill: var(--mcp-gray-400);
}

.elementor-mcp-template-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.elementor-mcp-template-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.elementor-mcp-template-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-700, #374151);
	line-height: 1.4;
}

.elementor-mcp-template-desc {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--mcp-gray-500);
	line-height: 1.5;
	flex: 1;
}

.elementor-mcp-template-actions {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.elementor-mcp-template-actions-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.elementor-mcp-template-actions-row .button {
	flex: 1;
	min-width: 0;
	justify-content: center;
	white-space: nowrap;
}

.elementor-mcp-template-preview {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	text-align: center;
	text-decoration: none;
}

.elementor-mcp-template-preview svg {
	fill: currentColor;
	flex-shrink: 0;
}

/* =========================================================================
 * Prompts Tab
 * ========================================================================= */

.elementor-mcp-prompts-intro {
	margin-bottom: 24px;
}

.elementor-mcp-prompts-intro h2 {
	font-size: 16px;
	font-weight: 600;
	color: var(--mcp-gray-800);
	margin: 0 0 6px;
}

.elementor-mcp-prompts-intro .description {
	color: var(--mcp-gray-500);
	font-size: 13px;
	margin: 0;
	max-width: 680px;
}

.elementor-mcp-prompts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.elementor-mcp-prompt-card {
	position: relative;
	padding: 20px;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	/* Only transition cheap properties — `transition: all` + box-shadow + transform
	 * on hover across 50+ cards causes paint/composite churn that feels like a hang. */
	transition: border-color var(--mcp-transition);
	display: flex;
	flex-direction: column;
	/* Skip rendering work for cards scrolled out of view. The browser still includes
	 * them in the grid layout (intrinsic-size keeps the scrollbar stable), but doesn't
	 * paint or run hover styles until they actually enter the viewport. Massive win
	 * with 50+ cards. Supported in Chrome/Edge/Opera; gracefully ignored elsewhere. */
	content-visibility: auto;
	contain-intrinsic-size: 220px;
}

.elementor-mcp-prompt-card:hover {
	border-color: var(--mcp-primary);
}

.elementor-mcp-prompt-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.elementor-mcp-prompt-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-800);
	margin: 0;
}

.elementor-mcp-prompt-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 500;
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

.elementor-mcp-prompt-desc {
	color: var(--mcp-gray-500);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 16px;
	flex: 1;
}

.elementor-mcp-prompt-actions {
	display: flex;
	align-items: center;
}

.elementor-mcp-prompt-actions .elementor-mcp-copy-btn {
	position: static;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--mcp-gray-50) !important;
	border: 1px solid var(--mcp-gray-300) !important;
	color: var(--mcp-gray-600) !important;
	font-size: 12px !important;
	padding: 6px 14px !important;
	min-height: auto !important;
	border-radius: var(--mcp-radius-sm) !important;
	font-weight: 500;
}

.elementor-mcp-prompt-actions .elementor-mcp-copy-btn:hover {
	background: var(--mcp-primary-light) !important;
	border-color: var(--mcp-primary) !important;
	color: var(--mcp-primary) !important;
}

.elementor-mcp-prompt-actions .elementor-mcp-copy-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Prompts CTA Banner */
.elementor-mcp-prompts-cta {
	background: linear-gradient(135deg, var(--mcp-primary), #818cf8);
	border-radius: var(--mcp-radius);
	padding: 32px;
	text-align: center;
}

.elementor-mcp-prompts-cta-content h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--mcp-white);
	margin: 0 0 8px;
}

.elementor-mcp-prompts-cta-content p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	margin: 0 0 20px;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}

.elementor-mcp-prompts-cta-btn.button.button-primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mcp-white) !important;
	color: var(--mcp-primary) !important;
	border: none !important;
	padding: 10px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: var(--mcp-radius-sm) !important;
	text-decoration: none;
	transition: all var(--mcp-transition) !important;
	box-shadow: var(--mcp-shadow) !important;
	text-shadow: none !important;
}

.elementor-mcp-prompts-cta-btn.button.button-primary:hover {
	background: var(--mcp-gray-50) !important;
	box-shadow: var(--mcp-shadow-lg) !important;
	transform: translateY(-1px);
}

.elementor-mcp-prompts-cta-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	flex-shrink: 0;
}

/* =========================================================================
 * Changelog Tab
 * ========================================================================= */

.elementor-mcp-changelog-intro {
	margin-bottom: 24px;
}

.elementor-mcp-changelog-intro h2 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	color: var(--mcp-gray-900);
}

.elementor-mcp-changelog-intro .description {
	color: var(--mcp-gray-500);
	font-size: 14px;
	margin: 0;
}

.elementor-mcp-changelog-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.elementor-mcp-changelog-version {
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-lg);
	padding: 20px 24px;
	transition: border-color var(--mcp-transition);
}

.elementor-mcp-changelog-version:hover {
	border-color: var(--mcp-gray-300);
}

.elementor-mcp-changelog-version.is-latest {
	border-color: var(--mcp-primary);
	border-width: 2px;
}

.elementor-mcp-changelog-version-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.elementor-mcp-changelog-version-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mcp-gray-900);
}

.elementor-mcp-changelog-badge {
	display: inline-block;
	padding: 2px 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mcp-white);
	background: var(--mcp-primary);
	border-radius: 99px;
}

.elementor-mcp-changelog-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-mcp-changelog-items > li {
	padding: 11px 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--mcp-gray-700);
	border-bottom: 1px solid var(--mcp-gray-100);
}

.elementor-mcp-changelog-items > li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.elementor-mcp-changelog-items strong {
	color: var(--mcp-gray-900);
	font-weight: 600;
}

.elementor-mcp-changelog-items code,
.elementor-mcp-changelog-note code {
	padding: 1px 6px;
	font-size: 12px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: 4px;
	font-family: Menlo, Consolas, monospace;
	color: var(--mcp-gray-800);
}

.elementor-mcp-changelog-items a,
.elementor-mcp-changelog-note a {
	color: var(--mcp-primary);
	text-decoration: none;
	font-weight: 500;
}

.elementor-mcp-changelog-items a:hover,
.elementor-mcp-changelog-note a:hover {
	text-decoration: underline;
}

/* Nested sub-items. */
.elementor-mcp-changelog-subitems {
	list-style: none;
	margin: 8px 0 2px;
	padding: 0 0 0 16px;
	border-left: 2px solid var(--mcp-gray-200);
}

.elementor-mcp-changelog-subitems li {
	padding: 4px 0;
	border: 0;
	font-size: 12.5px;
	color: var(--mcp-gray-500);
}

/* Blockquote note callout (e.g. a Pro re-activation notice). */
.elementor-mcp-changelog-note {
	margin: 0 0 14px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.6;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-left: 3px solid #f59e0b;
	border-radius: 8px;
}

.elementor-mcp-changelog-note strong {
	color: #78350f;
}

/* Color-coded category tags. */
.elementor-mcp-cl-tag {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 8px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 4px;
	vertical-align: 1px;
}

.elementor-mcp-cl-tag--new        { background: #dcfce7; color: #166534; }
.elementor-mcp-cl-tag--fixed      { background: #fef3c7; color: #92400e; }
.elementor-mcp-cl-tag--improved   { background: #dbeafe; color: #1e40af; }
.elementor-mcp-cl-tag--changed    { background: #ede9fe; color: #5b21b6; }
.elementor-mcp-cl-tag--removed    { background: #fee2e2; color: #991b1b; }
.elementor-mcp-cl-tag--security   { background: #fee2e2; color: #991b1b; }
.elementor-mcp-cl-tag--deprecated { background: var(--mcp-gray-100); color: var(--mcp-gray-600); }
.elementor-mcp-cl-tag--note       { background: var(--mcp-gray-100); color: var(--mcp-gray-600); }

/* =========================================================================
 * Responsive
 * ========================================================================= */

@media screen and (max-width: 960px) {
	.elementor-mcp-stats {
		flex-wrap: wrap;
	}

	.elementor-mcp-stat {
		flex: 1 1 140px;
	}

	.elementor-mcp-header {
		flex-wrap: wrap;
	}

	.elementor-mcp-header-actions {
		width: 100%;
		margin-left: 0;
		margin-top: 4px;
	}

	.elementor-mcp-prompts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 782px) {
	.elementor-mcp-admin {
		margin-right: 10px;
	}

	.elementor-mcp-header {
		padding: 16px;
	}

	.elementor-mcp-header-btn {
		padding: 6px 12px;
		font-size: 12px;
	}

	.elementor-mcp-stats {
		flex-direction: column;
		padding: 12px 16px;
	}

	.elementor-mcp-stat {
		flex: 1 1 auto;
	}

	.elementor-mcp-admin .nav-tab-wrapper {
		padding: 0 16px;
	}

	.elementor-mcp-admin .tab-content {
		padding: 16px;
	}

	.elementor-mcp-tools-grid {
		grid-template-columns: 1fr;
	}

	.elementor-mcp-category-toggle {
		min-width: 0;
	}

	.elementor-mcp-status-grid {
		grid-template-columns: 1fr;
	}

	.elementor-mcp-prompts-grid {
		grid-template-columns: 1fr;
	}

	.elementor-mcp-prompts-cta {
		padding: 24px 16px;
	}

	.elementor-mcp-changelog-version {
		padding: 16px;
	}
}

/* -------------------------------------------------------------------------
 * Brand Kits
 * ------------------------------------------------------------------------- */

.elementor-mcp-stat-icon--brand-kits {
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
}

.elementor-mcp-brand-kit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 8px;
}

.elementor-mcp-brand-kit-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
	background: #fff;
	overflow: hidden;
	transition: border-color var(--mcp-transition);
}

.elementor-mcp-brand-kit-card:hover {
	border-color: var(--mcp-gray-400);
}

.elementor-mcp-brand-kit-preview {
	aspect-ratio: 16 / 10;
	background: var(--mcp-gray-100);
	overflow: hidden;
}

.elementor-mcp-brand-kit-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Fallback swatch strip when no pre-rendered preview ships. */
.elementor-mcp-brand-kit-swatches {
	display: flex;
	height: 64px;
	width: 100%;
}

.elementor-mcp-brand-kit-swatch {
	height: 100%;
	display: block;
}

.elementor-mcp-brand-kit-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.elementor-mcp-brand-kit-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}

.elementor-mcp-brand-kit-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-700, #374151);
	line-height: 1.4;
}

.elementor-mcp-brand-kit-desc {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--mcp-gray-500);
	line-height: 1.5;
	flex: 1;
}

.elementor-mcp-brand-kit-actions {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	gap: 8px;
}

.elementor-mcp-brand-kit-actions .button {
	flex: 1;
	justify-content: center;
}

/* Restore from backup */
.elementor-mcp-brand-kit-restore {
	margin-top: 28px;
	padding: 20px;
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-md, 8px);
	background: var(--mcp-gray-100);
}

.elementor-mcp-brand-kit-restore h3 {
	margin: 0 0 6px;
	font-size: 14px;
}

.elementor-mcp-brand-kit-restore-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 12px 0 8px;
	flex-wrap: wrap;
}

.elementor-mcp-brand-kit-backup-select {
	min-width: 280px;
	max-width: 100%;
}

.elementor-mcp-brand-kit-clobber {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--mcp-gray-600, #4b5563);
}

/* Apply confirmation modal */
.elementor-mcp-brand-kit-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.elementor-mcp-brand-kit-modal[hidden] {
	display: none;
}

.elementor-mcp-brand-kit-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.55);
}

.elementor-mcp-brand-kit-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--mcp-radius-md, 8px);
	box-shadow: var(--mcp-shadow-lg);
	width: 460px;
	max-width: calc(100vw - 40px);
	padding: 24px;
}

.elementor-mcp-brand-kit-modal__title {
	margin: 0 0 10px;
	font-size: 16px;
}

.elementor-mcp-brand-kit-modal__body {
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--mcp-gray-600, #4b5563);
	line-height: 1.6;
}

.elementor-mcp-brand-kit-modal__backup {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	margin-bottom: 18px;
}

.elementor-mcp-brand-kit-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* Success toast */
.elementor-mcp-bk-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 14px;
	background: #111827;
	color: #fff;
	padding: 14px 18px;
	border-radius: var(--mcp-radius-md, 8px);
	box-shadow: var(--mcp-shadow-lg);
	font-size: 13px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.elementor-mcp-bk-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.elementor-mcp-bk-toast a {
	color: #a5b4fc;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.elementor-mcp-bk-toast a:hover {
	color: #c7d2fe;
}

/* =========================================================================
 * Activate Abilities API card (Connection tab)
 * ========================================================================= */

.elementor-mcp-activate-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.elementor-mcp-activate-head h2 {
	margin: 0;
}

.elementor-mcp-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--mcp-gray-900, #111827);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.elementor-mcp-activate-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--mcp-gray-900, #111827);
	cursor: pointer;
}

.elementor-mcp-activate-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
}

.elementor-mcp-activate-note {
	margin: 0 0 10px;
	max-width: 80ch;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mcp-gray-700, #374151);
}

.elementor-mcp-activate-note--security strong {
	color: #b91c1c;
}

/* =========================================================================
 * Pagination (Prompts / Templates / Brand Kits grids)
 * Client-side, filter-aware pager rendered by initGridPagination() in admin.js.
 * ========================================================================= */

.elementor-mcp-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0 8px;
}

.elementor-mcp-pager:empty {
	display: none;
}

.elementor-mcp-pager-btn {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--mcp-gray-700);
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-sm);
	cursor: pointer;
	transition: all var(--mcp-transition);
}

.elementor-mcp-pager-btn:hover:not(:disabled):not(.is-current) {
	border-color: var(--mcp-primary);
	color: var(--mcp-primary);
	background: var(--mcp-primary-light);
}

.elementor-mcp-pager-btn.is-current {
	color: var(--mcp-white);
	background: var(--mcp-primary);
	border-color: var(--mcp-primary);
	cursor: default;
}

.elementor-mcp-pager-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.elementor-mcp-pager-ellipsis {
	min-width: 22px;
	text-align: center;
	color: var(--mcp-gray-400);
	font-size: 13px;
	user-select: none;
}

.elementor-mcp-pager-status {
	width: 100%;
	text-align: center;
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--mcp-gray-500);
}

/* =========================================================================
 * Code Viewer Overlay (slide-in sidebar with copy + download)
 * ========================================================================= */

.emcp-code-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.emcp-code-overlay.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.emcp-code-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.emcp-code-overlay__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 640px;
	max-width: 92vw;
	display: flex;
	flex-direction: column;
	background: #1e1e1e;
	color: #d4d4d4;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
	transform: translateX(100%);
	transition: transform 0.22s ease;
}

.emcp-code-overlay.is-open .emcp-code-overlay__panel {
	transform: translateX(0);
}

.emcp-code-overlay__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #252526;
	border-bottom: 1px solid #333;
}

.emcp-code-overlay__title {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.emcp-code-overlay__close {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #d4d4d4;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.emcp-code-overlay__close:hover {
	background: #37373d;
	color: #fff;
}

.emcp-code-overlay__toolbar {
	display: flex;
	gap: 8px;
	padding: 10px 18px;
	background: #252526;
	border-bottom: 1px solid #333;
}

.emcp-code-overlay__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid #3c3c3c;
	border-radius: 6px;
	background: #2d2d2d;
	color: #d4d4d4;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.emcp-code-overlay__btn:hover {
	background: #094771;
	border-color: #0e639c;
	color: #fff;
}

.emcp-code-overlay__body {
	flex: 1;
	margin: 0;
	padding: 16px 18px;
	overflow: auto;
	background: #1e1e1e;
}

.emcp-code-overlay__body code {
	display: block;
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 13px;
	line-height: 1.6;
	color: #d4d4d4;
	white-space: pre;
	tab-size: 4;
}

/* Hidden per-row code source feeding the overlay. */
.emcp-code-src {
	display: none;
}

@media ( max-width: 782px ) {
	.emcp-code-overlay__panel {
		width: 100vw;
		max-width: 100vw;
	}
}

/* Click-to-copy chip (e.g. a snippet shortcode). */
.emcp-copy-text {
	position: relative;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.emcp-copy-text:hover {
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
}

.emcp-copy-text:focus-visible {
	outline: 2px solid var(--mcp-primary);
	outline-offset: 1px;
}

.emcp-copy-text::after {
	content: attr(data-emcp-copied);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%) translateY(4px);
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--mcp-gray-900);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.emcp-copy-text.is-copied::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Divider inside the Connection "Activate" card (between toggles). */
.elementor-mcp-activate-divider {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--mcp-gray-200);
}

/* Connection tab — auth self-test (#41). */
.elementor-mcp-authtest-ok { color: #157347; font-weight: 600; }
.elementor-mcp-authtest-bad { color: #b32d2e; font-weight: 600; }
.elementor-mcp-authtest-fix {
	margin-top: 10px;
	padding: 12px 14px;
	background: #fcf6e6;
	border: 1px solid #e6d8a8;
	border-radius: 6px;
}
.elementor-mcp-authtest-snippet {
	background: #1e1e1e;
	color: #e6e6e6;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.5;
	overflow-x: auto;
	margin: 4px 0 12px;
	white-space: pre;
}

/* ── Tools page platform sub-tabs ─────────────────────────────── */
.elementor-mcp-subtabs {
	display: flex;
	gap: 4px;
	margin: 16px 0 18px;
	border-bottom: 1px solid var(--mcp-gray-200);
}
.elementor-mcp-subtab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	margin-bottom: -1px;
	background: transparent;
	border: 1px solid transparent;
	border-bottom: 2px solid transparent;
	border-radius: 6px 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-500);
	cursor: pointer;
}
.elementor-mcp-subtab:hover { color: var(--mcp-gray-800); background: var(--mcp-gray-100); }
.elementor-mcp-subtab.is-active {
	color: var(--mcp-gray-800);
	border-bottom-color: #2271b1;
}
.elementor-mcp-subtab-count {
	font-size: 11px;
	font-weight: 600;
	color: var(--mcp-gray-500);
	background: var(--mcp-gray-100);
	border-radius: 10px;
	padding: 1px 8px;
}
.elementor-mcp-subtab.is-active .elementor-mcp-subtab-count {
	color: var(--mcp-white);
	background: #2271b1;
}
.elementor-mcp-tabpanel { display: none; }
.elementor-mcp-tabpanel.is-active { display: block; }

/* Compact tool mode: an info banner above the still-interactive per-tool grid. */
.elementor-mcp-compact-banner {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #eef0ff;
	border: 1px solid #c9cdf5;
	border-left: 3px solid #5145e5;
	border-radius: 6px;
}
.elementor-mcp-compact-banner p { margin: 0; font-size: 13px; color: #2b2f44; }

/* Connection-tab client picker */
.elementor-mcp-client-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 12px;
	margin: 12px 0 20px;
}
.elementor-mcp-client-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 12px;
	background: #fff;
	border: 1px solid var( --mcp-gray-300, #d1d5db );
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.elementor-mcp-client-card:hover { border-color: var( --mcp-primary, #6366f1 ); }
.elementor-mcp-client-card.is-selected {
	border-color: var( --mcp-primary, #6366f1 );
	box-shadow: 0 0 0 1px var( --mcp-primary, #6366f1 ) inset;
}
.elementor-mcp-client-card .dashicons { font-size: 28px; width: 28px; height: 28px; color: var( --mcp-gray-600, #4b5563 ); }
.elementor-mcp-client-card.is-selected .dashicons { color: var( --mcp-primary, #6366f1 ); }
.elementor-mcp-client-card-logo { width: 32px; height: 32px; object-fit: contain; display: block; }

/* Context page */
.elementor-mcp-context-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 8px 0;
}
.elementor-mcp-context-counter {
	font-size: 12px;
	color: var( --mcp-gray-600, #4b5563 );
}
.elementor-mcp-context-counter.is-warn {
	color: #b45309;
	font-weight: 600;
}
.elementor-mcp-context-preview {
	margin: 0;
	padding: 14px 16px;
	background: var( --mcp-gray-900, #0f172a );
	color: #e2e8f0;
	font-size: 12px;
	line-height: 1.6;
	border-radius: var( --mcp-radius, 8px );
	white-space: pre-wrap;
	max-height: 360px;
	overflow: auto;
}
.elementor-mcp-client-card-label { font-weight: 600; font-size: 13px; text-align: center; }

/* Elementor-inactive state: tools not registered */
.elementor-mcp-tool-card.is-unavailable { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.elementor-mcp-tool-card.is-unavailable .elementor-mcp-toggle-track { cursor: not-allowed; }
.elementor-mcp-elementor-inactive { margin: 0 0 16px; }

/* Per-tool "install/activate X to enable" hint (e.g. Astra + Spectra combo). */
.elementor-mcp-tool-unavailable-note {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--mcp-amber-600, #b45309);
}

/* Section-level notice (e.g. Astra + Spectra File Generation heads-up). */
.elementor-mcp-cat-notice {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}
.elementor-mcp-cat-notice.is-warning {
	background: var(--mcp-amber-50, #fffbeb);
	border: 1px solid var(--mcp-amber-200, #fde68a);
	color: var(--mcp-amber-800, #92400e);
}
.elementor-mcp-cat-notice.is-info {
	background: var(--mcp-blue-50, #eff6ff);
	border: 1px solid var(--mcp-blue-200, #bfdbfe);
	color: var(--mcp-blue-800, #1e40af);
}
.elementor-mcp-cat-notice-icon { flex: 0 0 auto; margin-top: 1px; opacity: 0.9; }

/* Modules tab ----------------------------------------------------------- */
.emcp-modules-grid { grid-template-columns: repeat( auto-fill, minmax( 360px, 1fr ) ); }
.emcp-module-card { flex-direction: column; cursor: default; gap: 0; }
.emcp-module-card.is-disabled { opacity: 1; background: var(--mcp-gray-50); }
.emcp-module-card.is-disabled .elementor-mcp-tool-info { opacity: 0.7; }
.emcp-module-head { display: flex; align-items: flex-start; gap: 12px; width: 100%; cursor: pointer; }
.emcp-module-card.is-unavailable .emcp-module-head { cursor: not-allowed; }

/* Live toggle flip (no Tools-grid JS on this tab). */
.emcp-switch input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track { background: var(--mcp-primary); }
.emcp-switch input[type="checkbox"]:checked + .elementor-mcp-toggle .elementor-mcp-toggle-track::after { transform: translateX(16px); }
.emcp-switch input[type="checkbox"]:focus-visible + .elementor-mcp-toggle .elementor-mcp-toggle-track { box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary); }

.emcp-module-unavailable { color: #b32d2e; font-style: italic; margin: 12px 0 0 50px; }
.emcp-module-settings { margin: 14px 0 0 50px; }
.emcp-module-knobs { display: flex; flex-direction: column; gap: 10px; }
.emcp-module-knob { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mcp-gray-700, #3c434a); }
.emcp-module-knob input[type="number"] { width: 90px; }
.emcp-module-bulk { margin: 14px 0 0 50px; padding-top: 14px; border-top: 1px solid var(--mcp-gray-200); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.emcp-bulk-progress { flex-basis: 100%; margin-top: 8px; }
.emcp-bulk-bar { height: 8px; background: var(--mcp-gray-200); border-radius: 4px; overflow: hidden; }
.emcp-bulk-bar span { display: block; height: 100%; width: 0; background: var(--mcp-primary); transition: width .2s; }
.emcp-bulk-status { font-size: 12px; color: var(--mcp-gray-600, #50575e); }
/* Shared switch (Connection cards, Modules) --------------------------------- */
.emcp-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.emcp-switch input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.emcp-switch-label { font-weight: 600; font-size: 14px; }

/* Connection sub-tab: two cards in a row ------------------------------------ */
.emcp-conn-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax( 340px, 1fr ) ); gap: 16px; margin: 4px 0 16px; }
.emcp-conn-card { border: 1px solid var(--mcp-gray-200); border-radius: var(--mcp-radius); background: var(--mcp-white); padding: 18px 20px; }
.emcp-conn-card-title { margin: 0 0 14px; font-size: 15px; }
.emcp-conn-toggle { margin-bottom: 12px; }

/* 3rd Party Services: aligned key fields ------------------------------------ */
.emcp-services-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 340px, 1fr ) ); gap: 18px; margin: 16px 0 20px; }
.emcp-service-field { display: flex; flex-direction: column; gap: 6px; }
.emcp-service-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.emcp-service-field-head label { font-weight: 600; }
.emcp-service-field-head a { font-size: 12px; text-decoration: none; }
.emcp-service-field input[type="text"] { width: 100%; }
.emcp-service-field input[type="text"]:disabled { background: var(--mcp-gray-50); color: var(--mcp-gray-600, #50575e); }
/* Connection sub-tab header: tabs left, Save button right -------------------- */
.emcp-conn-subhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 16px 0 18px; border-bottom: 1px solid var(--mcp-gray-200); }
.elementor-mcp-subtabs--flush { border-bottom: none; margin: 0; }
.emcp-subtab-actions { display: flex; align-items: center; padding-bottom: 6px; }
.emcp-subtab-save { margin: 0 !important; }
/* [hidden] alone loses to WP's .button { display:inline-block } — force it. */
.emcp-subtab-save[hidden] { display: none !important; }
/* 3rd Party Services: saved-key badge + clear control ----------------------- */
.emcp-service-badge { display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #1a7a34; background: #edfaef; border-radius: 3px; padding: 1px 6px; vertical-align: middle; }
.emcp-service-clear { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--mcp-gray-600, #50575e); }
/* Image Optimization module knobs ------------------------------------------- */
.emcp-io { display: flex; flex-direction: column; gap: 14px; }
.emcp-io-toggle { align-items: flex-start; }
.emcp-io-toggle .elementor-mcp-toggle { margin-top: 2px; }
.emcp-io-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.emcp-io-toggle-title { font-weight: 600; font-size: 13px; color: var(--mcp-gray-800, #1d2327); }
.emcp-io-toggle-desc { font-size: 12px; color: var(--mcp-gray-600, #50575e); line-height: 1.4; }
.emcp-io-toggle--child { margin-left: 26px; padding-left: 14px; border-left: 2px solid var(--mcp-gray-200); }
.emcp-io-sep { border: none; border-top: 1px solid var(--mcp-gray-200); margin: 2px 0; }

.emcp-io-field { display: flex; flex-direction: column; gap: 8px; }
.emcp-io-field-head { display: flex; align-items: center; justify-content: space-between; }
.emcp-io-field-head label { font-weight: 600; font-size: 13px; color: var(--mcp-gray-800, #1d2327); }
.emcp-io-range-out { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--mcp-white); background: var(--mcp-primary); border-radius: 4px; padding: 1px 8px; min-width: 34px; text-align: center; }
.emcp-io-range-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--mcp-gray-500, #787c82); }
.emcp-io-hint { font-size: 12px; color: var(--mcp-gray-600, #50575e); }
.emcp-io-inline { display: flex; align-items: center; gap: 8px; }
.emcp-io-number { width: 110px; }
.emcp-io-unit { font-size: 12px; color: var(--mcp-gray-600, #50575e); }

/* Range slider */
.emcp-io-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--mcp-primary) 0, var(--mcp-primary) var(--emcp-fill, 0%), var(--mcp-gray-200) var(--emcp-fill, 0%), var(--mcp-gray-200) 100%); outline: none; margin: 2px 0; }
.emcp-io-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--mcp-primary); border: 2px solid var(--mcp-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.emcp-io-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--mcp-primary); border: 2px solid var(--mcp-white); box-shadow: 0 1px 3px rgba(0,0,0,.2); cursor: pointer; }
.emcp-io-range:focus-visible { box-shadow: 0 0 0 2px var(--mcp-white), 0 0 0 4px var(--mcp-primary); }
/* Module card action row + settings overlay --------------------------------- */
.emcp-module-card-actions { margin: auto 0 0 50px; padding-top: 14px; }
.emcp-module-settings-btn { display: inline-flex; align-items: center; }

.emcp-modal[hidden] { display: none; }
.emcp-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; }
.emcp-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.emcp-modal-panel { position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; background: var(--mcp-white); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.emcp-modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--mcp-gray-200); background: var(--mcp-white); }
.emcp-modal-head h2 { margin: 0; font-size: 16px; }
.emcp-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; color: var(--mcp-gray-600, #50575e); border-radius: 6px; cursor: pointer; }
.emcp-modal-close:hover { background: var(--mcp-gray-100); color: var(--mcp-gray-800, #1d2327); }
.emcp-modal-body { padding: 20px; }
.emcp-modal-foot { padding: 0 20px 20px; }
.emcp-modal-foot .button { margin: 0 !important; }
.emcp-modal-bulk { padding: 16px 20px 20px; border-top: 1px solid var(--mcp-gray-200); }
.emcp-modal-bulk-title { margin: 0 0 10px; font-weight: 600; font-size: 13px; }
.emcp-modal-bulk .emcp-module-bulk { margin: 0; padding: 0; border: none; }
body.emcp-modal-open { overflow: hidden; }
.emcp-modules-unsaved { margin-left: 12px; font-size: 12px; font-weight: 600; color: #a15c00; }
/* Module card buttons (Show Settings / Configure) — match the theme primary. */
.button.emcp-module-settings-btn { border: 1px solid var(--mcp-primary); color: var(--mcp-primary); background: var(--mcp-white); box-shadow: none; font-weight: 600; text-decoration: none; }
.button.emcp-module-settings-btn:hover, .button.emcp-module-settings-btn:focus { background: var(--mcp-primary); color: var(--mcp-white); border-color: var(--mcp-primary); box-shadow: none; }
.button.emcp-module-settings-btn:focus-visible { outline: 2px solid var(--mcp-primary); outline-offset: 1px; }
/* Full-width admin header (app bar + tab nav + Help dropdown) ---------------- */
.elementor-mcp-admin > h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.emcp-appbar { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--mcp-white); border-bottom: 1px solid var(--mcp-gray-200); padding: 10px 20px 10px 20px; margin: 0 -20px 0 -22px; border-top: 1px solid var(--mcp-gray-200); }
.emcp-appbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 15px 0; width: 40%;}
.emcp-appbar-logo { width: 34px; height: 34px; border-radius: 6px; object-fit: contain; }
.emcp-appbar-title { font-size: 18px; font-weight: 700; color: var(--mcp-gray-800, #1d2327); }
.emcp-appbar-version { font-size: 11px; font-weight: 700; color: var(--mcp-primary); background: var(--mcp-primary-light); border-radius: 10px; padding: 2px 8px; }
.emcp-appbar-actions { display: flex; align-items: center; gap: 10px; }

.emcp-help-menu { position: relative; }
/* Match the Changelog / Affiliate Program pill buttons (.emcp-appbar-changelog). */
.emcp-help-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--mcp-gray-800, #1d2327); text-decoration: none; cursor: pointer; }
.emcp-help-toggle:hover { border-color: var(--mcp-primary); color: var(--mcp-primary); }
.emcp-help-toggle .dashicons { font-size: 16px; width: 16px; height: 16px; }
.emcp-help-caret { font-size: 16px; width: 16px; height: 16px; line-height: 1; color: var(--mcp-gray-500, #787c82); }
.emcp-help-toggle:hover .emcp-help-caret { color: var(--mcp-primary); }
.emcp-help-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--mcp-white); border: 1px solid var(--mcp-gray-200); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 1000; }
.emcp-help-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.emcp-help-menu:hover .emcp-help-dropdown, .emcp-help-menu:focus-within .emcp-help-dropdown { display: block; }
.emcp-help-dropdown a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--mcp-gray-800, #1d2327); text-decoration: none; font-size: 13px; }
.emcp-help-dropdown a:hover { background: var(--mcp-primary-light); color: var(--mcp-primary); }
.emcp-help-dropdown .dashicons { font-size: 18px; width: 18px; height: 18px; color: var(--mcp-gray-500, #787c82); }
.emcp-help-dropdown a:hover .dashicons { color: var(--mcp-primary); }

.emcp-appbar-upgrade { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--mcp-primary); color: var(--mcp-white); border: 1px solid var(--mcp-primary); border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
.emcp-appbar-upgrade:hover { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
.emcp-appbar-upgrade .dashicons { font-size: 15px; width: 15px; height: 15px; }

.emcp-appnav { display: flex; align-items: stretch; gap: 0px; background: var(--mcp-white); border-bottom: 1px solid var(--mcp-gray-200); padding: 0 14px; overflow-x: auto; overflow-y: hidden; margin: 0; }
.emcp-appnav-item { display: inline-flex; align-items: center; gap: 7px; padding: 14px 16px; margin-bottom: -1px; white-space: nowrap; color: var(--mcp-gray-600, #50575e); text-decoration: none; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; flex: 1; justify-content: center; text-align: center; border-right: 1px solid var(--mcp-gray-200); }
.emcp-appnav-item:hover { color: var(--mcp-gray-800, #1d2327); background: var(--mcp-gray-50); }
.emcp-appnav-item.is-active { color: var(--mcp-primary); border-bottom-color: var(--mcp-primary); }
.emcp-appnav-item .dashicons { font-size: 16px; width: 16px; height: 16px; }
.emcp-appbar-changelog { display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; background: var(--mcp-white); font-size: 13px; font-weight: 600; color: var(--mcp-gray-800, #1d2327); text-decoration: none; }
.emcp-appbar-changelog:hover, .emcp-appbar-changelog.is-active { border-color: var(--mcp-primary); color: var(--mcp-primary); }
.emcp-appbar-changelog .dashicons { font-size: 16px; width: 16px; height: 16px; }
/* =========================================================================
 * Focus reset (utility) — remove the default WP/browser outline + box-shadow
 * that flashes on click for our themed anchors/buttons; show a subtle indigo
 * (theme) ring only on real keyboard focus (:focus-visible) for a11y. Inputs,
 * selects and the toggle switches keep their own focus styling.
 * Order matters: :focus (reset) first, :focus-visible (ring) second.
 * ========================================================================= */
.elementor-mcp-admin a:focus,
.elementor-mcp-admin button:focus,
.elementor-mcp-admin .button:focus,
.elementor-mcp-admin [role="menuitem"]:focus {
	outline: none !important;
	box-shadow: none !important;
}
.elementor-mcp-admin a:focus-visible,
.elementor-mcp-admin button:focus-visible,
.elementor-mcp-admin .button:focus-visible,
.elementor-mcp-admin [role="menuitem"]:focus-visible {
	outline: 2px solid var(--mcp-primary) !important;
	outline-offset: 2px;
	box-shadow: none !important;
}
.elementor-mcp-stat-icon--templates { background: #e0f7f4; color: #0d9488; }

/* Swipeable header rows: keep horizontal scroll (touch/drag/trackpad) but hide
   the scrollbar so small screens read as a swipeable menu, not a scrolling box. */
.emcp-appnav, .elementor-mcp-stats { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.emcp-appnav::-webkit-scrollbar, .elementor-mcp-stats::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Drag-to-scroll affordance for the header nav (mouse). */
.emcp-appnav { cursor: grab; }
.emcp-appnav.is-dragging { cursor: grabbing; user-select: none; }
.emcp-appnav.is-dragging .emcp-appnav-item { cursor: grabbing; }
/* Header nav overflow arrows (small desktops). Wrapper carries the full-bleed;
   arrows overlay the edges and only show when the tabs overflow. */
.emcp-appnav-wrap { position: relative; margin: 0 -20px 20px -22px; }
.emcp-appnav-arrow { position: absolute; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-bottom: 1px solid var(--mcp-gray-200); background: var(--mcp-white); color: var(--mcp-gray-600, #50575e); cursor: pointer; z-index: 3; }
.emcp-appnav-arrow[hidden] { display: none !important; }
.emcp-appnav-arrow:hover { color: var(--mcp-primary); }
.emcp-appnav-arrow .dashicons { font-size: 22px; width: 22px; height: 22px; }
.emcp-appnav-arrow--prev { left: 0; box-shadow: 8px 0 10px -6px rgba(0,0,0,.18); }
.emcp-appnav-arrow--next { right: 0; box-shadow: -8px 0 10px -6px rgba(0,0,0,.18); }

@media (max-width: 900px) {
	.emcp-appbar-brand {
		width: 30%;
	}
}
/* Compact header title on small screens: show "MCP Tools" instead of the full
   name wrapping to multiple lines. */
.emcp-appbar-title--short { display: none; }
@media screen and (max-width: 900px) {
	.emcp-appbar-title--full { display: none; }
	.emcp-appbar-title--short { display: inline; white-space: nowrap; }
}

/* =========================================================================
 * Dashboard tab
 * ========================================================================= */

/* On the Dashboard the shared content box goes flush so each section can be
   its own card panel instead of everything sharing one big container. */
.elementor-mcp-admin .tab-content--flush {
	background: transparent;
	border: none;
	padding: 0;
}

.emcp-dash {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Each dashboard section is a standalone white card panel. */
.emcp-dash-stats,
.emcp-dash-section {
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius-lg);
	padding: 22px 24px;
}

/* ---- Video guides + Help, side by side (70 / 30) ------------------------- */

.emcp-dash-row {
	display: flex;
	gap: 20px;
	align-items: stretch;
}

.emcp-dash-section--videos {
	flex: 7 1 0;
	min-width: 0;
}

.emcp-dash-section--help {
	flex: 3 1 0;
	min-width: 0;
}

/* Two videos per row inside the 70% column. */
.emcp-dash-section--videos .emcp-dash-videos {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Help links stack in a single column inside the 30% column. */
.emcp-dash-section--help .emcp-dash-help {
	grid-template-columns: 1fr;
}

/* Stack the row on narrower screens. */
@media screen and (max-width: 1200px) {
	.emcp-dash-row {
		flex-direction: column;
	}
}

/* ---- Headline stats ------------------------------------------------------ */

.emcp-dash-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
}

/* Stat tiles sit flat inside the stats panel (the panel is the container). */
.emcp-dash-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
}

.emcp-dash-stat + .emcp-dash-stat {
	border-left: 1px solid var(--mcp-gray-200);
}

.emcp-dash-stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--mcp-radius-sm);
	flex-shrink: 0;
}

.emcp-dash-stat-icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.emcp-dash-stat-icon--tools { background: var(--mcp-primary-light); color: var(--mcp-primary); }
.emcp-dash-stat-icon--active { background: var(--mcp-success-light); color: var(--mcp-success); }
.emcp-dash-stat-icon--pro { background: var(--mcp-pro-light); color: var(--mcp-pro); }
.emcp-dash-stat-icon--prompts { background: #fef3c7; color: var(--mcp-warning); }
.emcp-dash-stat-icon--brand-kits { background: #ffe4e6; color: #e11d48; }
.emcp-dash-stat-icon--templates { background: #dbeafe; color: #2563eb; }

.emcp-dash-stat-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.emcp-dash-stat-value {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--mcp-gray-900);
}

.emcp-dash-stat-label {
	font-size: 13px;
	color: var(--mcp-gray-500);
	margin-top: 2px;
}

/* ---- Section scaffolding ------------------------------------------------- */

.emcp-dash-section-head {
	margin-bottom: 14px;
}

.emcp-dash-section-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--mcp-gray-900);
	margin: 0 0 10px 0;
	padding: 0;
}

.emcp-dash-section-sub {
	font-size: 13px;
	color: var(--mcp-gray-500);
	margin: 4px 0 0;
}

/* ---- Feature grid -------------------------------------------------------- */

.emcp-dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}

.emcp-dash-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	text-decoration: none;
	transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), background var(--mcp-transition), transform var(--mcp-transition);
	position: relative;
	flex-direction: column;
}

.emcp-dash-card:hover,
.emcp-dash-card:focus {
	background: var(--mcp-white);
	border-color: var(--mcp-primary);
	box-shadow: var(--mcp-shadow-md);
	transform: translateY(-1px);
}

.emcp-dash-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--mcp-radius-sm);
	background: var(--mcp-primary-light);
	color: var(--mcp-primary);
	flex-shrink: 0;
}

.emcp-dash-card-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.emcp-dash-card-body {
	flex: 1;
	min-width: 0;
}

.emcp-dash-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--mcp-gray-900);
	line-height: 1.3;
}

.emcp-dash-card-desc {
	display: block;
	font-size: 12.5px;
	color: var(--mcp-gray-500);
	line-height: 1.5;
	margin-top: 4px;
}

.emcp-dash-card-arrow {
	color: var(--mcp-gray-300);
	flex-shrink: 0;
	align-self: center;
	transition: color var(--mcp-transition), transform var(--mcp-transition);
	position: absolute;
	top: 25px;
	right: 15px;
}

.emcp-dash-card:hover .emcp-dash-card-arrow {
	color: var(--mcp-primary);
	transform: translateX(2px);
}

.emcp-dash-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 999px;
	line-height: 1.4;
}

.emcp-dash-badge--pro {
	background: var(--mcp-pro-light);
	color: var(--mcp-pro);
}

/* ---- Video guides -------------------------------------------------------- */

.emcp-dash-videos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

.emcp-dash-video {
	display: flex;
	flex-direction: column;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), transform var(--mcp-transition);
}

.emcp-dash-video:hover,
.emcp-dash-video:focus {
	border-color: var(--mcp-primary);
	box-shadow: var(--mcp-shadow-md);
	transform: translateY(-1px);
}

.emcp-dash-video-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--mcp-gray-100);
	overflow: hidden;
}

.emcp-dash-video-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--mcp-transition);
}

.emcp-dash-video:hover .emcp-dash-video-img {
	transform: scale(1.04);
}

.emcp-dash-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.72);
	color: var(--mcp-white);
	transition: background var(--mcp-transition);
}

.emcp-dash-video:hover .emcp-dash-video-play {
	background: var(--mcp-primary);
}

.emcp-dash-video-play .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
	margin-left: 2px;
}

.emcp-dash-video-meta {
	display: block;
	padding: 12px 14px;
}

.emcp-dash-video-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-800);
	line-height: 1.4;
}

.emcp-dash-video-channel {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 5px;
	font-size: 12px;
	color: var(--mcp-gray-500);
}

.emcp-dash-video-channel .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

/* "Watch More" CTA card — last item in the video grid. */
.emcp-dash-video--more {
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	background: var(--mcp-primary-light);
	border-style: dashed;
	border-color: var(--mcp-primary);
	text-align: center;
}

.emcp-dash-video--more:hover,
.emcp-dash-video--more:focus {
	background: var(--mcp-white);
	border-style: solid;
}

.emcp-dash-more-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--mcp-primary);
}

.emcp-dash-more-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 2px;
	border-radius: 50%;
	background: var(--mcp-white);
	color: var(--mcp-primary);
	transition: background var(--mcp-transition), color var(--mcp-transition);
}

.emcp-dash-video--more:hover .emcp-dash-more-icon,
.emcp-dash-video--more:focus .emcp-dash-more-icon {
	background: var(--mcp-primary);
	color: var(--mcp-white);
}

.emcp-dash-more-icon .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.emcp-dash-more-title {
	font-family: var(--mcp-font-heading);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mcp-primary);
}

.emcp-dash-more-sub {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
	color: var(--mcp-gray-500);
}

.emcp-dash-more-sub .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

/* ---- Help & resources ---------------------------------------------------- */

/* Version / update-status indicator (top of the Help panel). */
.emcp-dash-version {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 14px;
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	text-decoration: none;
}

.emcp-dash-version--ok {
	background: var(--mcp-success-light);
	border-color: #a7f3d0;
}

.emcp-dash-version--update {
	background: #fffbeb;
	border-color: #fde68a;
	transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition);
}

.emcp-dash-version--update:hover,
.emcp-dash-version--update:focus {
	border-color: var(--mcp-warning);
	box-shadow: var(--mcp-shadow-md);
}

.emcp-dash-version-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.emcp-dash-version--ok .emcp-dash-version-dot {
	background: var(--mcp-success);
}

.emcp-dash-version--update .emcp-dash-version-dot {
	background: var(--mcp-warning);
	box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}

.emcp-dash-version-text {
	flex: 1;
	min-width: 0;
	line-height: 1.35;
}

.emcp-dash-version-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mcp-gray-900);
}

.emcp-dash-version--ok .emcp-dash-version-title {
	color: #065f46;
}

.emcp-dash-version--update .emcp-dash-version-title {
	color: #92400e;
}

.emcp-dash-version-sub {
	display: block;
	font-size: 12px;
	color: var(--mcp-gray-500);
	margin-top: 1px;
}

.emcp-dash-version-cta {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	color: #92400e;
}

.emcp-dash-version-cta .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	transition: transform var(--mcp-transition);
}

.emcp-dash-version--update:hover .emcp-dash-version-cta .dashicons {
	transform: translateX(2px);
}

.emcp-dash-help {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.emcp-dash-help-link {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 18px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: var(--mcp-radius);
	text-decoration: none;
	transition: box-shadow var(--mcp-transition), border-color var(--mcp-transition), background var(--mcp-transition);
}

.emcp-dash-help-link:hover,
.emcp-dash-help-link:focus {
	background: var(--mcp-white);
	border-color: var(--mcp-primary);
	box-shadow: var(--mcp-shadow-md);
}

.emcp-dash-help-link .dashicons {
	color: var(--mcp-primary);
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 1px;
}

.emcp-dash-help-title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mcp-gray-900);
}

.emcp-dash-help-desc {
	display: block;
	font-size: 12px;
	color: var(--mcp-gray-500);
	margin-top: 2px;
	line-height: 1.5;
}

@media screen and (max-width: 782px) {
	.emcp-dash-stat-value {
		font-size: 26px;
	}

	/* Stat tiles stack — drop the vertical dividers. */
	.emcp-dash-stat + .emcp-dash-stat {
		border-left: none;
	}
}

/* =========================================================================
 * "Prompts have been rewritten" notice — flat, dismissible, one-time.
 * ========================================================================= */

.elementor-mcp-prompts-whatsnew {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 0 0 24px;
	padding: 18px 44px 18px 20px;
	background: var(--mcp-primary-light, #eef2ff);
	border: 1px solid #c7d2fe;
	border-left: 3px solid var(--mcp-primary, #6366f1);
	border-radius: var(--mcp-radius-sm, 6px);
}

.elementor-mcp-prompts-whatsnew-body {
	min-width: 0;
}

.elementor-mcp-prompts-whatsnew h3 {
	margin: 0 0 6px;
	font-family: var(--mcp-font-heading);
	font-size: 15px;
	line-height: 1.3;
	color: var(--mcp-gray-900, #111827);
}

.elementor-mcp-prompts-whatsnew p {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mcp-gray-700, #374151);
}

.elementor-mcp-prompts-whatsnew p:last-child {
	margin-bottom: 0;
}

.elementor-mcp-prompts-whatsnew-dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--mcp-radius-sm, 6px);
	color: var(--mcp-gray-500, #6b7280);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.elementor-mcp-prompts-whatsnew-dismiss:hover,
.elementor-mcp-prompts-whatsnew-dismiss:focus {
	background: #dbe1fd;
	color: var(--mcp-gray-900, #111827);
}

.elementor-mcp-prompts-whatsnew-dismiss .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

/* =========================================================================
 * Prompts v1 (legacy) download — secondary button beside "Sync Library".
 * Flat, no gradient; mirrors the sync button's geometry so the pair aligns.
 * ========================================================================= */

.elementor-mcp-pro-prompts-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.wp-core-ui a.elementor-mcp-legacy-btn,
.wp-core-ui .elementor-mcp-legacy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	min-height: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--mcp-gray-700, #374151);
	background: var(--mcp-white, #fff);
	border: 1px solid var(--mcp-gray-300, #d1d5db);
	border-radius: var(--mcp-radius-sm, 6px);
	box-shadow: none;
	cursor: pointer;
	text-decoration: none;
	text-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-core-ui a.elementor-mcp-legacy-btn:hover,
.wp-core-ui a.elementor-mcp-legacy-btn:focus,
.wp-core-ui .elementor-mcp-legacy-btn:hover,
.wp-core-ui .elementor-mcp-legacy-btn:focus {
	background: var(--mcp-gray-50, #f9fafb);
	border-color: var(--mcp-gray-400, #9ca3af);
	color: var(--mcp-gray-900, #111827);
	box-shadow: none;
}

.wp-core-ui a.elementor-mcp-legacy-btn:focus-visible {
	outline: 2px solid var(--mcp-primary, #6366f1);
	outline-offset: 1px;
}

.elementor-mcp-legacy-btn .dashicons {
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--mcp-gray-500, #6b7280);
}

@media screen and (max-width: 782px) {
	.elementor-mcp-pro-prompts-actions {
		width: 100%;
	}
}
/* ---------------------------------------------------------------------------
   History tab — AI-safe change ledger (flat, no gradients)
   --------------------------------------------------------------------------- */
.emcp-history__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 8px 0 16px;
}
.emcp-history__title { margin: 0 0 4px; }
.emcp-history__intro { margin: 0; color: #50575e; max-width: 640px; }
.emcp-history__filters {
	display: flex;
	gap: 6px;
	margin: 0;
	list-style: none;
	flex-wrap: wrap;
}
.emcp-history__filters li a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #2c3338;
	text-decoration: none;
	font-size: 12px;
}
.emcp-history__filters li.is-active a {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
}
.emcp-history__table { margin-top: 8px; }
.emcp-history__ago { display: block; color: #787c82; font-size: 11px; }
.emcp-history__summary { color: #50575e; font-size: 12px; }
.emcp-history__target { font-family: Consolas, Monaco, monospace; font-size: 12px; word-break: break-all; }
.emcp-history__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: #646970;
}
.emcp-history__badge--elementor { background: #2271b1; }
.emcp-history__badge--filesystem { background: #8c6d1f; }
.emcp-history__badge--database { background: #7c3aed; }
.emcp-history__actions-col { white-space: nowrap; }
.emcp-history__rollback .dashicons { margin: 3px 2px 0 -2px; font-size: 15px; }
.emcp-history__state { color: #787c82; }
.emcp-history__state--done { color: #2271b1; font-weight: 600; }
.emcp-history__empty {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #787c82;
}
.emcp-history__empty .dashicons { font-size: 32px; width: 32px; height: 32px; opacity: .5; }
.emcp-history__note { color: #787c82; font-size: 12px; margin-top: 10px; }

/* .mcpb bundle credential warning (Connection tab) */
.elementor-mcp-mcpb-warning {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid #dba617;
	border-left-width: 4px;
	border-radius: 4px;
	background: #fcf9e8;
	color: #674e00;
	font-size: 13px;
	line-height: 1.5;
}
.elementor-mcp-mcpb-warning .dashicons {
	color: #dba617;
	flex: 0 0 auto;
	margin-top: 1px;
}

/* ===== Connection: authentication-method chooser + OAuth ===== */
.emcp-auth-methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 720px;
}
.emcp-auth-card {
	display: block;
	position: relative;
	padding: 18px 20px;
	border: 2px solid var(--mcp-line, #e2e4ea);
	border-radius: 12px;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.emcp-auth-card:hover { border-color: #c7cbe0; }
.emcp-auth-card:has(input:checked) {
	border-color: #4f46e5;
	box-shadow: 0 0 0 1px #4f46e5 inset;
}
.emcp-auth-card.is-disabled { opacity: .55; cursor: not-allowed; }
.emcp-auth-card.is-disabled:hover { border-color: var(--mcp-line, #e2e4ea); }
.emcp-auth-card input { position: absolute; opacity: 0; pointer-events: none; }
.emcp-auth-card__title {
	display: flex; align-items: center; gap: 10px;
	font-size: 15px; font-weight: 600; color: #1e1f2b; margin-bottom: 6px;
}
.emcp-auth-card__desc { display: block; font-size: 13px; color: #64677a; line-height: 1.5; }
.emcp-auth-card__note { display: block; margin-top: 8px; font-size: 12.5px; color: #9497a8; }
.emcp-auth-badge {
	font-size: 11px; font-weight: 600; color: #16794a;
	background: #dff3e6; border-radius: 999px; padding: 2px 9px;
}
.emcp-manage-apps-link { font-size: 13px; }
.emcp-oauth-signin { margin-top: 4px; }
.emcp-oauth-signin-title { margin: 0 0 4px; }
body[data-emcp-auth="oauth"] [data-authfor="app-password"] { display: none; }
body[data-emcp-auth="app-password"] [data-authfor="oauth"] { display: none; }
@media (max-width: 600px) { .emcp-auth-methods { grid-template-columns: 1fr; } }
/* OAuth per-client step layout */
.emcp-oauth-step { margin: 16px 0 6px; font-size: 14px; color: #1e1f2b; }
.emcp-oauth-step:first-child { margin-top: 0; }
.emcp-oauth-desc { margin: 0 0 8px; }
.emcp-oauth-path-label { color: #9497a8; font-size: 12.5px; }
.emcp-oauth-deeplink { margin-bottom: 6px; }
/* Dashboard "Your usage" — 4-card activity grid. Flat, no gradients. */
.emcp-dash-usage-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.emcp-dash-ucard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 16px 16px 14px;
	background: var(--mcp-gray-50);
	border: 1px solid var(--mcp-gray-200);
	border-radius: 10px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.emcp-dash-ucard:hover {
	background: var(--mcp-white);
	border-color: var(--mcp-primary);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.emcp-dash-ucard:focus-visible { outline: 2px solid var(--mcp-primary); outline-offset: 2px; }
.emcp-dash-ucard-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.emcp-dash-ucard-ico {
	width: 28px; height: 28px; flex: none;
	border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
}
.emcp-dash-ucard-ico .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }
.emcp-dash-ucard-ico--usage   { background: var(--mcp-primary-light); color: var(--mcp-primary); }
.emcp-dash-ucard-ico--history { background: var(--mcp-success-light); color: var(--mcp-success); }
.emcp-dash-ucard-ico--tools   { background: #dbeafe; color: #2563eb; }
.emcp-dash-ucard-ico--sandbox { background: #fef3c7; color: var(--mcp-warning); }
.emcp-dash-ucard-title {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--mcp-gray-500);
}
.emcp-dash-ucard-num { font-size: 30px; font-weight: 700; line-height: 1; color: #1f2430; font-variant-numeric: tabular-nums; }
.emcp-dash-ucard-sub { font-size: 12.5px; color: var(--mcp-gray-500); margin-top: 4px; }
.emcp-dash-ucard-foot { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--mcp-gray-500); }
/* KPI pair (Usage card) */
.emcp-dash-ucard-kpis { display: flex; gap: 22px; }
.emcp-dash-ucard-kpi { display: flex; flex-direction: column; }
.emcp-dash-ucard-kpi .emcp-dash-ucard-num { font-size: 26px; }
/* Most-used list */
.emcp-dash-ucard-list { margin: 0; padding: 0; list-style: none; width: 100%; }
.emcp-dash-ucard-list li {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	padding: 5px 0; border-bottom: 1px solid var(--mcp-gray-100);
	font-size: 12.5px;
}
.emcp-dash-ucard-list li:last-child { border-bottom: 0; }
.emcp-dash-ucard-act { color: #374151; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emcp-dash-ucard-dom { color: var(--mcp-gray-500); }
.emcp-dash-ucard-cnt { color: var(--mcp-primary); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.emcp-dash-ucard-empty { font-size: 12.5px; color: var(--mcp-gray-500); }
@media screen and (max-width: 1200px) {
	.emcp-dash-usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 600px) {
	.emcp-dash-usage-grid { grid-template-columns: 1fr; }
}
.elementor-mcp-template-usage { display: inline-block; font-size: 11.5px; color: #6b7280; margin: 2px 0 0; }

/* =========================================================================
 * Sandbox overview — Blocks / Widgets / PHP Snippets navigation cards.
 * The whole card is one click target into its pillar; a hover lift + arrow
 * replace the old floating button, and the count is a compact inline line
 * (no giant stat number). Flat, no gradients.
 * ========================================================================= */
.emcp-sandbox-overview > h2 { margin: 0 0 4px; font-size: 18px; }
.emcp-sandbox-overview > .description { margin: 0 0 20px; max-width: 820px; }
.emcp-sandbox-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.emcp-sb-card {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 18px 18px 16px;
	background: var(--mcp-white);
	border: 1px solid var(--mcp-gray-200);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.emcp-sb-card:hover,
.emcp-sb-card:focus-visible {
	border-color: var(--mcp-primary);
	box-shadow: 0 6px 18px rgba(79, 70, 229, .12);
	outline: none;
}
.emcp-sb-card-top { display: flex; align-items: center; gap: 12px; }
.emcp-sb-card-ico {
	width: 44px; height: 44px; flex: none;
	border-radius: 11px;
	display: inline-flex; align-items: center; justify-content: center;
}
.emcp-sb-card-ico .dashicons { font-size: 25px; width: 25px; height: 25px; line-height: 25px; }
.emcp-sb-card-titles { display: flex; align-items: center; gap: 8px; min-width: 0; }
.emcp-sb-card-title { font-size: 16px; font-weight: 700; color: #1f2430; }
.emcp-sb-card-arrow {
	margin-left: auto;
	font-size: 20px; line-height: 1;
	color: var(--mcp-gray-400);
	transition: transform .15s ease, color .15s ease;
}
.emcp-sb-card:hover .emcp-sb-card-arrow,
.emcp-sb-card:focus-visible .emcp-sb-card-arrow { color: var(--mcp-primary); transform: translateX(4px); }
.emcp-sb-card-desc { font-size: 13px; line-height: 1.55; color: var(--mcp-gray-500); }
.emcp-sb-card-meta {
	margin-top: auto;
	padding-top: 4px;
	font-size: 13px;
	color: var(--mcp-gray-500);
	display: flex; align-items: center; gap: 5px;
}
.emcp-sb-card-meta-active { font-weight: 700; color: var(--mcp-primary); }
.emcp-sb-card-meta-draft { font-weight: 700; color: #1f2430; }
.emcp-sb-card-dot { color: var(--mcp-gray-300); }
.emcp-sb-card-locked { display: inline-flex; align-items: center; gap: 5px; color: var(--mcp-gray-500); }
.emcp-sb-card-locked .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 15px; }
@media screen and (max-width: 1200px) {
	.emcp-sandbox-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 782px) {
	.emcp-sandbox-cards { grid-template-columns: 1fr; }
}
/* "Back to Sandbox" outlined button on each pillar page. */
.emcp-sandbox-back { margin: 0 0 16px; }
.emcp-sandbox-back .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; }

/* History: delete one / clear all. */
.emcp-history__clear-wrap { margin: 10px 0 0; }
.emcp-history__clear { display: inline-flex; align-items: center; gap: 4px; color: #b32d2e; text-decoration: none; }
.emcp-history__clear:hover { color: #8a2424; }
.emcp-history__clear .dashicons { font-size: 16px; width: 16px; height: 16px; }
.emcp-history__delete { display: inline-flex; align-items: center; margin-left: 8px; color: #b32d2e; text-decoration: none; vertical-align: middle; }
.emcp-history__delete:hover { color: #8a2424; }
.emcp-history__delete .dashicons { font-size: 16px; width: 16px; height: 16px; }

/* Pro-locked tool section: upgrade CTA in the category header. */
.elementor-mcp-cat-upgrade {
	display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
	font-size: 12px; font-weight: 600; color: #8a2be2; text-decoration: none;
	padding: 4px 10px; border: 1px solid rgba(138, 43, 226, .35); border-radius: 999px;
	background: rgba(138, 43, 226, .06); white-space: nowrap;
}
.elementor-mcp-cat-upgrade:hover { background: rgba(138, 43, 226, .12); color: #6d1fb0; }
.elementor-mcp-cat-upgrade .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* ── Sandbox action buttons: plugin styling over WP .button + dashicons ── */
.emcp-sb-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.emcp-sb-actions .emcp-sb-cloud { display: contents; }
.emcp-sb-actions .button,
.emcp-sb-actions .button:visited {
	display: inline-flex; align-items: center; gap: 5px;
	min-height: 30px; padding: 4px 12px; margin: 0;
	font-size: 12.5px; font-weight: 500; line-height: 1.4;
	border-radius: var(--mcp-radius-sm);
	background: var(--mcp-white); color: var(--mcp-gray-600);
	border: 1px solid var(--mcp-gray-300); box-shadow: none;
	transition: all var(--mcp-transition);
}
.emcp-sb-actions .button:hover { background: var(--mcp-gray-50); border-color: var(--mcp-gray-400); color: var(--mcp-gray-800); }
.emcp-sb-actions .button:focus { outline: none; border-color: var(--mcp-primary); box-shadow: 0 0 0 2px var(--mcp-primary-light); }
.emcp-sb-actions .button .dashicons { font-size: 15px; width: 15px; height: 15px; line-height: 1; margin: 0; }
.emcp-sb-actions .button-primary,
.emcp-sb-actions .button-primary:visited { background: var(--mcp-primary); color: var(--mcp-white); border-color: var(--mcp-primary); }
.emcp-sb-actions .button-primary:hover { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
.emcp-sb-actions .emcp-sb-danger,
.emcp-sb-actions .emcp-sb-danger:visited { color: #b32d2e; border-color: #e6b3b2; }
.emcp-sb-actions .emcp-sb-danger:hover { background: #fbeaea; border-color: #d63638; color: #b32d2e; }
.emcp-sb-actions .button[disabled], .emcp-sb-actions .button:disabled { opacity: .55; cursor: default; }
.emcp-sb-tag { display: inline-block; margin-left: 2px; font-size: 11px; font-weight: 600; color: #8a6d00; background: #fcf3d9; padding: 2px 9px; border-radius: 10px; }
.emcp-sb-msg { font-size: 12px; color: var(--mcp-gray-500); }
.emcp-sb-actions .button-primary .dashicons,
.emcp-sb-actions .button-primary:hover .dashicons,
.emcp-sb-actions .button-primary:focus .dashicons { color: var(--mcp-white); }

/* ── Rotating announcement / promo bar ─────────────────────────────────── */
/* Full-width edge-to-edge permanent top strip, matching the app-bar breakout. */
.emcp-annc { position: relative; margin: -10px -20px 0 -22px; overflow: hidden; }
.emcp-annc-slides { position: relative; }
.emcp-annc-slide { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 10px 56px 10px 20px; text-decoration: none; box-sizing: border-box; }
.emcp-annc-slide.is-active { display: flex; }
.emcp-annc-slide--cloud { background: var(--mcp-primary); }
.emcp-annc-slide--ltd { background: #c2410c; }
.emcp-annc-badge { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: rgba(255,255,255,.22); color: #fff; padding: 2px 8px; border-radius: 999px; }
.emcp-annc-icon { flex: none; color: rgba(255,255,255,.85); font-size: 18px; width: 18px; height: 18px; }
.emcp-annc-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emcp-annc-text strong { color: #fff; font-weight: 700; }
.emcp-annc-cta { flex: none; display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); padding: 5px 12px; border-radius: 999px; transition: background .15s; }
.emcp-annc-slide:hover .emcp-annc-cta { background: rgba(255,255,255,.28); }
.emcp-annc-cta .dashicons { font-size: 15px; width: 15px; height: 15px; }
.emcp-annc-dots { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px; z-index: 2; }
.emcp-annc-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: background .15s; }
.emcp-annc-dot.is-active { background: #fff; }
.emcp-annc-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 3px; line-height: 0; z-index: 2; }
.emcp-annc-close:hover { color: #fff; }
.emcp-annc-close .dashicons { font-size: 18px; width: 18px; height: 18px; }
@media screen and (max-width: 782px) {
	.emcp-annc-slide { padding-right: 66px; gap: 8px; }
	.emcp-annc-badge, .emcp-annc-icon, .emcp-annc-dots { display: none; }
	.emcp-annc-text { white-space: normal; font-size: 12px; }
}

/* ── Explore your toolkit + EMCP Cloud banner (75/25) ──────────────────── */
.emcp-dash-row--toolkit { display: flex; gap: 20px; align-items: stretch; margin-bottom: 26px; }
.emcp-dash-section--toolkit { flex: 75 1 0; min-width: 0; }
/* Right column: two stacked promo banners (Cloud + Pro). */
.emcp-dash-side { flex: 25 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.emcp-dash-promo { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; border-radius: var(--mcp-radius); padding: 20px; color: #fff; }
.emcp-dash-promo--cloud { background: var(--mcp-primary); }
.emcp-dash-promo--pro { background: var(--mcp-pro); }
.emcp-dash-promo-badge { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.2); padding: 3px 9px; border-radius: 999px; }
.emcp-dash-promo-icon { font-size: 26px; width: 26px; height: 26px; color: rgba(255,255,255,.92); margin-top: 2px; }
.emcp-dash-promo-title { color: #fff; font-family: 'Geist', sans-serif; font-size: 17px; font-weight: 600; margin: 2px 0 0; letter-spacing: -0.01em; }
.emcp-dash-promo-desc { color: rgba(255,255,255,.85); font-size: 12.5px; line-height: 1.5; margin: 0; }
.emcp-dash-promo-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.emcp-dash-promo-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.92); }
.emcp-dash-promo-list li .dashicons { flex: none; font-size: 15px; width: 15px; height: 15px; color: #fff; }
.emcp-dash-promo-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: #fff; color: var(--mcp-primary); font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: 8px; text-decoration: none; transition: background .15s; }
.emcp-dash-promo--pro .emcp-dash-promo-cta { color: var(--mcp-pro); }
.emcp-dash-promo-cta:hover { background: rgba(255,255,255,.92); }
.emcp-dash-promo-cta .dashicons { font-size: 15px; width: 15px; height: 15px; }
.emcp-dash-promo-note { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; }
.emcp-dash-promo-note .dashicons { font-size: 16px; width: 16px; height: 16px; }
@media screen and (max-width: 1200px) { .emcp-dash-row--toolkit { flex-direction: column; } }

/* -------------------------------------------------------------------------
 * Prominent disclosure cards on the sandbox screens.
 * Turns the "Import a bundle" and "Cloud Library" <details> into eye-catching
 * cards instead of plain disclosure-triangle text. Flat colors, no gradients.
 * ---------------------------------------------------------------------- */
.emcp-sb-disclosure { margin: 16px 0; border: 1px solid #dcdce1; border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.emcp-sb-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 15px 18px; font-size: 15px; font-weight: 600; color: #1d2327; background: #f6f7f9; transition: background .15s ease, color .15s ease; }
.emcp-sb-disclosure > summary::-webkit-details-marker { display: none; }
.emcp-sb-disclosure > summary::after { content: "\f347"; font-family: dashicons; margin-left: auto; font-size: 18px; line-height: 1; color: #787c82; transition: transform .15s ease; }
.emcp-sb-disclosure[open] > summary::after { transform: rotate(180deg); }
.emcp-sb-disclosure > summary:hover { background: #eef0f3; }
.emcp-sb-disclosure > summary:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; }
.emcp-sb-disclosure > summary .dashicons { font-size: 20px; width: 20px; height: 20px; color: #50575e; flex: 0 0 auto; }
.emcp-sb-disclosure > *:not(summary) { padding: 4px 18px 16px; }

/* Cloud Library — accent variant (the cross-site highlight). */
.emcp-sb-disclosure--cloud { border-color: #cbb6ef; }
.emcp-sb-disclosure--cloud > summary { background: #f4eefc; color: #4a1f8f; }
.emcp-sb-disclosure--cloud > summary:hover { background: #ece2fb; }
.emcp-sb-disclosure--cloud > summary .dashicons-cloud { color: #6a11cb; }
.emcp-sb-disclosure--cloud > summary::after { color: #6a11cb; }
.emcp-sb-disclosure__badge { margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #6a11cb; background: #fff; border: 1px solid #cbb6ef; border-radius: 999px; padding: 2px 9px; }

/* "Save all to Cloud" bulk button — plugin-branded (indigo), not WP blue. */
.button.emcp-sb-save-all { background: var(--mcp-primary); border-color: var(--mcp-primary); color: var(--mcp-white); font-weight: 600; }
.button.emcp-sb-save-all:hover, .button.emcp-sb-save-all:focus { background: var(--mcp-primary-hover); border-color: var(--mcp-primary-hover); color: var(--mcp-white); }
.button.emcp-sb-save-all:disabled { opacity: .6; }
.button.emcp-sb-save-all .dashicons { margin-right: 2px; }

/* Pending-count badge on the Memory app-nav tab (project-memory proposals awaiting review). */
.emcp-appnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #d63638; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }