/*
 * Espaço Invisível Kit – tool styles.
 *
 * Isolation from themes and other plugins:
 * 1. Every rule is scoped under .ei-scope.ei-scope (doubled class = more
 *    weight than typical theme selectors such as ".entry-content button").
 * 2. Elements inside the scope are first reverted to browser defaults
 *    (all: revert), so theme styles for button/input/p/table do not leak in.
 * 3. Colors come from --ei-* variables defined only on the scope.
 */

/* ---------- 1. Reset inside the scope ---------- */
.ei-scope.ei-scope,
.ei-scope.ei-scope :where(div, p, span, strong, button, input, textarea, select, option, label, table, thead, tbody, tr, th, td, ul, li) {
	all: revert;
}
.ei-scope.ei-scope,
.ei-scope.ei-scope *,
.ei-scope.ei-scope *::before,
.ei-scope.ei-scope *::after {
	box-sizing: border-box;
}
.ei-scope.ei-scope [hidden] {
	display: none !important;
}

/* ---------- 2. Tokens (colors are overridden from settings) ---------- */
.ei-scope.ei-scope {
	--ei-primary: #0A6B4B;
	--ei-on-primary: #FFFFFF;
	--ei-accent: #F5C542;
	--ei-soft: #EEF6F1;
	--ei-surface: #FFFFFF;
	--ei-bg: #F6F4EE;
	--ei-text: #16201B;
	--ei-muted: #55605A;
	--ei-border: #E2DFD5;
	--ei-dark: #16201B;
	--ei-radius: 14px;
	--ei-radius-sm: 10px;
	--ei-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ei-font-display: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
	--ei-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	display: block;
	width: 100%;
	max-width: 760px;
	margin: 24px auto;
	padding: 0;
	font-family: var(--ei-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--ei-text);
	-webkit-text-size-adjust: 100%;
}

/* ---------- 3. Card and layout ---------- */
.ei-scope.ei-scope .ei-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 16px;
	background: var(--ei-surface);
	border: 1px solid var(--ei-border);
	border-radius: calc(var(--ei-radius) + 6px);
	box-shadow: none;
}
@media (min-width: 600px) {
	.ei-scope.ei-scope .ei-card { padding: 24px; gap: 18px; }
}
.ei-scope.ei-scope .ei-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}
.ei-scope.ei-scope .ei-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ei-muted);
}
.ei-scope.ei-scope .ei-subtitle {
	margin: 0;
	font-family: var(--ei-font-display);
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ei-text);
}
.ei-scope.ei-scope .ei-stack { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.ei-scope.ei-scope .ei-stack--tight { gap: 6px; }
.ei-scope.ei-scope .ei-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.ei-scope.ei-scope .ei-row--between { justify-content: space-between; }
.ei-scope.ei-scope .ei-grow { flex: 1 1 auto; }
.ei-scope.ei-scope .ei-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
@media (min-width: 560px) {
	.ei-scope.ei-scope .ei-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ei-scope.ei-scope .ei-rule { height: 1px; margin: 2px 0; background: var(--ei-border); }

/* ---------- 4. Text ---------- */
.ei-scope.ei-scope .ei-label {
	display: block;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ei-text);
}
.ei-scope.ei-scope .ei-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ei-muted);
}
.ei-scope.ei-scope .ei-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ei-muted); }
.ei-scope.ei-scope .ei-mono { font-family: var(--ei-mono); font-size: 13px; }
.ei-scope.ei-scope .ei-quiet { color: var(--ei-muted); font-weight: 500; }
.ei-scope.ei-scope .ei-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ei-scope.ei-scope .ei-icon { display: inline-block; flex: none; width: 18px; height: 18px; vertical-align: middle; }

/* ---------- 5. Buttons ---------- */
.ei-scope.ei-scope .ei-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 0 18px;
	font-family: var(--ei-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1.5px solid var(--ei-border);
	border-radius: var(--ei-radius-sm);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 80ms ease, filter 120ms ease;
}
.ei-scope.ei-scope .ei-btn:hover { filter: brightness(0.96); }
.ei-scope.ei-scope .ei-btn:active { transform: scale(0.98); }
.ei-scope.ei-scope .ei-btn--primary { color: var(--ei-on-primary); background: var(--ei-primary); border-color: var(--ei-primary); }
.ei-scope.ei-scope .ei-btn--dark { color: #FFFFFF; background: var(--ei-dark); border-color: var(--ei-dark); }
.ei-scope.ei-scope .ei-btn--outline { background: var(--ei-surface); border: 2px solid var(--ei-text); }
.ei-scope.ei-scope .ei-btn--ghost { color: var(--ei-primary); background: var(--ei-soft); border: 1.5px dashed var(--ei-primary); }
.ei-scope.ei-scope .ei-btn--xl { min-height: 60px; font-size: 18px; border-radius: var(--ei-radius); }
.ei-scope.ei-scope .ei-btn--square { width: 48px; padding: 0; font-size: 20px; }
.ei-scope.ei-scope .ei-btn--small { min-height: 40px; padding: 0 12px; font-size: 14px; }
.ei-scope.ei-scope .ei-link {
	display: inline-flex;
	align-self: center;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0 8px;
	font-family: var(--ei-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--ei-primary);
	background: transparent;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ei-scope.ei-scope :is(.ei-btn, .ei-link, .ei-size, .ei-chip, .ei-lang__btn, .ei-lang__opt, .ei-tile, .ei-name):focus-visible,
.ei-scope.ei-scope .ei-input:focus-visible {
	outline: 3px solid var(--ei-accent);
	outline-offset: 2px;
}

/* ---------- 6. Language switcher ---------- */
.ei-scope.ei-scope .ei-lang { position: relative; flex: none; margin: 0; }
.ei-scope.ei-scope .ei-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	font-family: var(--ei-font);
	font-size: 13px;
	font-weight: 700;
	color: var(--ei-text);
	background: var(--ei-bg);
	border: 1px solid var(--ei-border);
	border-radius: var(--ei-radius-sm);
	white-space: nowrap;
	cursor: pointer;
}
.ei-scope.ei-scope .ei-lang__btn .ei-icon { width: 16px; height: 16px; }
.ei-scope.ei-scope .ei-lang__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 220px;
	margin: 0;
	padding: 6px;
	background: var(--ei-surface);
	border: 1px solid var(--ei-border);
	border-radius: var(--ei-radius);
	box-shadow: 0 10px 28px rgba(22, 32, 27, 0.14);
}
.ei-scope.ei-scope .ei-lang__opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	margin: 0;
	padding: 0 10px;
	font-family: var(--ei-font);
	font-size: 14px;
	color: var(--ei-text);
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.ei-scope.ei-scope .ei-lang__opt:hover,
.ei-scope.ei-scope .ei-lang__opt[aria-pressed="true"] { background: var(--ei-soft); }
.ei-scope.ei-scope .ei-lang__optcode { font-size: 12px; font-weight: 700; color: var(--ei-muted); }

/* ---------- 7. Gerador ---------- */
.ei-scope.ei-scope .ei-preview {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 14px;
	background: var(--ei-soft);
	border: 1px dashed var(--ei-primary);
	border-radius: var(--ei-radius);
}
.ei-scope.ei-scope .ei-preview__glyph {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--ei-mono);
	font-size: 28px;
	font-weight: 500;
	color: var(--ei-primary);
}
.ei-scope.ei-scope .ei-preview__bar {
	display: inline-block;
	height: 26px;
	overflow: hidden;
	color: transparent;
	background: var(--ei-accent);
	border-radius: 3px;
	transition: width 160ms ease;
}
.ei-scope.ei-scope .ei-preview__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ei-scope.ei-scope .ei-preview__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ei-scope.ei-scope .ei-preview__name { font-size: 16px; font-weight: 700; }
.ei-scope.ei-scope .ei-preview__code { color: var(--ei-muted); overflow-wrap: anywhere; }
.ei-scope.ei-scope .ei-badge {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--ei-on-primary);
	background: var(--ei-primary);
	border-radius: 999px;
}
.ei-scope.ei-scope .ei-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ei-scope.ei-scope .ei-size {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 72px;
	margin: 0;
	padding: 6px;
	font-family: var(--ei-font);
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 2px solid var(--ei-border);
	border-radius: var(--ei-radius-sm);
	cursor: pointer;
}
.ei-scope.ei-scope .ei-size[aria-pressed="true"] { background: var(--ei-soft); border-color: var(--ei-primary); }
.ei-scope.ei-scope .ei-size__glyph { display: inline-flex; align-items: center; gap: 2px; font-family: var(--ei-mono); font-size: 14px; color: var(--ei-muted); }
.ei-scope.ei-scope .ei-size__bar { display: inline-block; height: 14px; background: var(--ei-accent); border-radius: 2px; }
.ei-scope.ei-scope .ei-size__label { font-size: 14px; font-weight: 700; }
.ei-scope.ei-scope .ei-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ei-scope.ei-scope .ei-chip {
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	font-family: var(--ei-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1.5px solid var(--ei-border);
	border-radius: 999px;
	cursor: pointer;
}
.ei-scope.ei-scope .ei-chip[aria-pressed="true"] { color: #FFFFFF; background: var(--ei-dark); border-color: var(--ei-dark); }
.ei-scope.ei-scope .ei-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--ei-text);
	background: var(--ei-bg);
	border-radius: var(--ei-radius-sm);
}
.ei-scope.ei-scope .ei-hint .ei-icon { color: var(--ei-primary); }
.ei-scope.ei-scope .ei-qty { display: flex; align-items: center; gap: 8px; margin: 0; }
.ei-scope.ei-scope .ei-qty__val { width: 64px; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.ei-scope.ei-scope .ei-qty__val::-webkit-inner-spin-button,
.ei-scope.ei-scope .ei-qty__val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- 8. Inputs ---------- */
.ei-scope.ei-scope .ei-input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	font-family: var(--ei-font);
	font-size: 16px; /* 16px stops iOS from zooming in */
	line-height: 1.4;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1.5px solid var(--ei-border);
	border-radius: var(--ei-radius-sm);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.ei-scope.ei-scope .ei-input::placeholder { color: var(--ei-muted); opacity: 1; }
.ei-scope.ei-scope .ei-input:focus { border-color: var(--ei-primary); outline: none; }
.ei-scope.ei-scope .ei-qty .ei-input { width: 64px; }
.ei-scope.ei-scope .ei-textarea { min-height: 96px; resize: vertical; }
.ei-scope.ei-scope .ei-textarea--tall { min-height: 150px; }
.ei-scope.ei-scope .ei-select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355605A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* ---------- 9. Results (test area + detector) ---------- */
.ei-scope.ei-scope .ei-result { margin: 0; }
.ei-scope.ei-scope .ei-found {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 12px;
	background: var(--ei-soft);
	border-radius: var(--ei-radius-sm);
}
.ei-scope.ei-scope .ei-found__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ei-primary); }
.ei-scope.ei-scope .ei-found__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ei-scope.ei-scope .ei-found__item {
	margin: 0;
	padding: 4px 8px;
	font-family: var(--ei-mono);
	font-size: 12px;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1px solid var(--ei-border);
	border-radius: 6px;
}
.ei-scope.ei-scope .ei-warn { margin: 0; font-size: 14px; color: #8A3B12; }
.ei-scope.ei-scope .ei-where { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ei-scope.ei-scope .ei-where__text {
	margin: 0;
	padding: 12px;
	max-height: 220px;
	overflow: auto;
	font-size: 15px;
	line-height: 1.8;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--ei-bg);
	border-radius: var(--ei-radius-sm);
}
.ei-scope.ei-scope .ei-mark {
	display: inline-block;
	margin: 0 1px;
	padding: 0 4px;
	font-family: var(--ei-mono);
	font-size: 11px;
	line-height: 1.6;
	color: #5A4300;
	background: var(--ei-accent);
	border-radius: 4px;
}

/* ---------- 10. Nick builder ---------- */
.ei-scope.ei-scope .ei-tiles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 64px;
	margin: 0;
	padding: 10px;
	background: var(--ei-bg);
	border-radius: var(--ei-radius-sm);
}
.ei-scope.ei-scope .ei-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 44px;
	margin: 0;
	padding: 0 4px;
	font-family: var(--ei-font);
	font-size: 17px;
	font-weight: 700;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1px solid var(--ei-border);
	border-radius: 8px;
}
.ei-scope.ei-scope .ei-tile--space {
	width: 30px;
	background: #FFF3CC;
	border: 1.5px dashed #B8860B;
	cursor: pointer;
}
.ei-scope.ei-scope .ei-tile--add {
	min-width: 20px;
	width: 20px;
	padding: 0;
	font-size: 16px;
	color: var(--ei-primary);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.ei-scope.ei-scope .ei-count { margin: 0; font-size: 14px; color: var(--ei-muted); }
.ei-scope.ei-scope .ei-count strong { color: var(--ei-text); font-weight: 700; }
.ei-scope.ei-scope .ei-count--over strong,
.ei-scope.ei-scope .ei-count--over .ei-count__limit { color: #8A3B12; }

/* ---------- 11. Table ---------- */
.ei-scope.ei-scope .ei-table-wrap {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ei-border);
	border-radius: var(--ei-radius);
}
.ei-scope.ei-scope .ei-table {
	display: table;
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
	color: var(--ei-text);
	background: var(--ei-surface);
}
.ei-scope.ei-scope .ei-table th,
.ei-scope.ei-scope .ei-table td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--ei-border);
	background: transparent;
}
.ei-scope.ei-scope .ei-table th { font-size: 13px; font-weight: 700; color: var(--ei-muted); background: var(--ei-bg); }
.ei-scope.ei-scope .ei-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 480px) {
	/* Phones: the whole table fits without sideways scrolling, so the Copiar button is always in view. The preview and "Tipo" columns are hidden here (the page text explains them). */
	.ei-scope.ei-scope .ei-table { min-width: 0; font-size: 13px; }
	.ei-scope.ei-scope .ei-table th,
	.ei-scope.ei-scope .ei-table td { padding: 9px 6px; }
	.ei-scope.ei-scope .ei-table th:nth-child(2),
	.ei-scope.ei-scope .ei-table td:nth-child(2) { padding-left: 12px; white-space: nowrap; }
	.ei-scope.ei-scope .ei-table th:first-child,
	.ei-scope.ei-scope .ei-table td:first-child,
	.ei-scope.ei-scope .ei-table th:nth-child(4),
	.ei-scope.ei-scope .ei-table td:nth-child(4) { display: none; }
	.ei-scope.ei-scope .ei-table td:last-child { padding-right: 10px; text-align: right; }
	.ei-scope.ei-scope .ei-table .ei-btn--small { padding: 0 10px; }
}
.ei-scope.ei-scope .ei-cellglyph {
	display: inline-block;
	padding: 2px 6px;
	font-family: var(--ei-mono);
	font-size: 16px;
	white-space: pre;
	color: var(--ei-primary);
	background: var(--ei-soft);
	border-radius: 6px;
}

/* ---------- 12. Fancy letters ---------- */
.ei-scope.ei-scope .ei-styles { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; min-height: 200px; }
.ei-scope.ei-scope .ei-style {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 10px 10px 10px 14px;
	background: var(--ei-bg);
	border-radius: var(--ei-radius-sm);
}
.ei-scope.ei-scope .ei-style__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ei-scope.ei-scope .ei-style__name { font-size: 12px; font-weight: 700; color: var(--ei-muted); }
.ei-scope.ei-scope .ei-style__out { font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; color: var(--ei-text); }

/* ---------- 13. Toast (lives in its own scope at the end of <body>) ---------- */
.ei-scope.ei-scope.ei-toast-host {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2147483000;
	display: flex;
	justify-content: center;
	max-width: none;
	margin: 0;
	padding: 0 16px;
	pointer-events: none;
}
.ei-scope.ei-scope .ei-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 12px 16px;
	color: #FFFFFF;
	background: var(--ei-dark);
	border-radius: var(--ei-radius);
	box-shadow: 0 10px 28px rgba(22, 32, 27, 0.25);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 160ms ease, transform 160ms ease;
}
.ei-scope.ei-scope .ei-toast--show { opacity: 1; transform: none; }
.ei-scope.ei-scope .ei-toast__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	color: var(--ei-dark);
	background: var(--ei-accent);
	border-radius: 999px;
}
.ei-scope.ei-scope .ei-toast--fail .ei-toast__icon { color: #FFFFFF; background: #B4441B; }
.ei-scope.ei-scope .ei-toast__text { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.ei-scope.ei-scope .ei-toast__title { font-size: 15px; font-weight: 700; color: #FFFFFF; }
.ei-scope.ei-scope .ei-toast__sub { font-size: 13px; color: #D5DDD8; }

/* ---------- 13b. Lista de nomes [ei_nomes] ---------- */
.ei-scope.ei-scope .ei-names {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ei-scope.ei-scope .ei-names > li { margin: 0; padding: 0; }
.ei-scope.ei-scope .ei-name {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 8px 10px 8px 14px;
	font-family: var(--ei-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	color: var(--ei-text);
	background: var(--ei-surface);
	border: 1.5px solid var(--ei-border);
	border-radius: var(--ei-radius-sm);
	cursor: pointer;
}
.ei-scope.ei-scope .ei-name:hover { border-color: var(--ei-primary); }
.ei-scope.ei-scope .ei-name__text { min-width: 0; overflow-wrap: anywhere; }
.ei-scope.ei-scope .ei-name__sp {
	display: inline-block;
	min-width: 0.7em;
	background: #FFF3CC;
	border-bottom: 2px dashed #B8860B;
	border-radius: 2px;
}
.ei-scope.ei-scope .ei-name__copy { display: inline-flex; flex: none; color: var(--ei-muted); }
.ei-scope.ei-scope .ei-name:hover .ei-name__copy { color: var(--ei-primary); }

/* ---------- 14. Hardening ----------
 * Some themes force colors on every button/input with !important. Inside
 * the tools our colors must win, so the visual properties are repeated here
 * with !important. Order matters: base first, then variants, then states.
 */
.ei-scope.ei-scope :is(.ei-btn, .ei-size, .ei-chip, .ei-input, .ei-lang__btn, .ei-tile, .ei-name) {
	color: var(--ei-text) !important;
	background-color: var(--ei-surface) !important;
	border-color: var(--ei-border) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
.ei-scope.ei-scope :is(.ei-link, .ei-lang__opt, .ei-tile--add) {
	background-color: transparent !important;
	text-transform: none !important;
	box-shadow: none !important;
}
.ei-scope.ei-scope .ei-link,
.ei-scope.ei-scope .ei-tile--add { color: var(--ei-primary) !important; border-color: transparent !important; }
.ei-scope.ei-scope .ei-lang__opt { color: var(--ei-text) !important; }
.ei-scope.ei-scope .ei-lang__btn { background-color: var(--ei-bg) !important; }
.ei-scope.ei-scope .ei-btn--primary { color: var(--ei-on-primary) !important; background-color: var(--ei-primary) !important; border-color: var(--ei-primary) !important; }
.ei-scope.ei-scope .ei-btn--dark { color: #FFFFFF !important; background-color: var(--ei-dark) !important; border-color: var(--ei-dark) !important; }
.ei-scope.ei-scope .ei-btn--outline { border-color: var(--ei-text) !important; }
.ei-scope.ei-scope .ei-btn--ghost { color: var(--ei-primary) !important; background-color: var(--ei-soft) !important; border-color: var(--ei-primary) !important; }
.ei-scope.ei-scope .ei-size[aria-pressed="true"] { background-color: var(--ei-soft) !important; border-color: var(--ei-primary) !important; }
.ei-scope.ei-scope .ei-chip[aria-pressed="true"] { color: #FFFFFF !important; background-color: var(--ei-dark) !important; border-color: var(--ei-dark) !important; }
.ei-scope.ei-scope .ei-lang__opt[aria-pressed="true"],
.ei-scope.ei-scope .ei-lang__opt:hover { background-color: var(--ei-soft) !important; }
.ei-scope.ei-scope .ei-tile--space { background-color: #FFF3CC !important; border-color: #B8860B !important; }
.ei-scope.ei-scope .ei-input:focus { border-color: var(--ei-primary) !important; }
.ei-scope.ei-scope .ei-name:hover { border-color: var(--ei-primary) !important; }

@media (prefers-reduced-motion: reduce) {
	.ei-scope.ei-scope *,
	.ei-scope.ei-scope *::before,
	.ei-scope.ei-scope *::after { transition: none !important; }
}