/* EasyScreen PDF Checker — frontend styles.
 *
 * Themes (via .espc-theme-X class on .espc-app):
 *   site         — default. Light cards, lime-green EasyScreen accent.
 *   transparent  — like site but card backgrounds are transparent (form
 *                  blends into whatever container it's embedded in).
 *   light        — neutral light grey (no brand colour).
 *   dark         — legacy dark.
 *
 * RTL-aware via CSS logical properties. Tooltips are CSS-only.
 *
 * Token convention: --espc-accent is the primary CTA colour. --espc-accent-fg
 * is the readable text colour ON that background — must be set per theme,
 * since lime needs dark text but blue needs white text.
 */

/* Default tokens (site theme — light + EasyScreen lime). */
.espc-app {
	--espc-bg:           transparent;       /* let parent page show through */
	--espc-bg-2:         #ffffff;
	--espc-bg-3:         #f7f8f9;
	--espc-fg:           #1a1a1a;
	--espc-fg-dim:       #475569;
	--espc-fg-mute:      #94a3b8;
	--espc-border:       #e5e7eb;
	--espc-border-2:     #d1d5db;
	--espc-accent:       #c5dc4a;            /* EasyScreen lime */
	--espc-accent-2:     #b3c83a;            /* hover / active */
	--espc-accent-fg:    #1a1a1a;            /* dark text on lime */
	--espc-good:         #16a34a;
	--espc-good-bg:      rgba(22, 163, 74, .10);
	--espc-soft:         #f59e0b;
	--espc-soft-bg:      rgba(245, 158, 11, .12);
	--espc-bad:          #dc2626;
	--espc-bad-bg:       rgba(220, 38, 38, .10);
	--espc-radius:       16px;
	--espc-radius-sm:    10px;
	--espc-radius-pill:  9999px;
	--espc-shadow:       0 1px 3px rgba(15, 23, 42, .06);

	background: var(--espc-bg);
	color: var(--espc-fg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
	max-width: 980px;
	margin: 0 auto;
	padding: 24px 16px;
	line-height: 1.5;
	border-radius: var(--espc-radius);
	box-sizing: border-box;
}
.espc-app *, .espc-app *::before, .espc-app *::after { box-sizing: border-box; }

/* === Theme: site ====================================================== */
/* Defaults above already implement this — no overrides needed. */
.espc-theme-site { /* alias for clarity in HTML */ }

/* === Theme: transparent =============================================== */
/* Like site, but card / nested element backgrounds vanish so the form
 * inherits whatever wrapper (brand banner, page background image) it sits
 * inside. Borders and accents stay so structure is still visible. */
.espc-theme-transparent {
	--espc-bg-2: transparent;
	--espc-bg-3: transparent;
	--espc-shadow: none;
}
.espc-theme-transparent .espc-card {
	border-color: transparent;
}
.espc-theme-transparent .espc-card.espc-page-card,
.espc-theme-transparent .espc-card.espc-footer {
	background: transparent;
	border: none;
	padding-inline: 0;
}
.espc-theme-transparent .espc-results-head {
	background: transparent;
	border: none;
	padding-inline: 0;
}
.espc-theme-transparent .espc-obj {
	background: transparent;
	border-color: var(--espc-border);
}
.espc-theme-transparent .espc-settings-block {
	background: transparent;
}

/* === Theme: light (neutral) =========================================== */
.espc-theme-light {
	--espc-bg:        #ffffff;
	--espc-bg-2:      #f9fafb;
	--espc-bg-3:      #f3f4f6;
	--espc-fg:        #111827;
	--espc-fg-dim:    #4b5563;
	--espc-fg-mute:   #6b7280;
	--espc-border:    #e5e7eb;
	--espc-border-2:  #d1d5db;
	--espc-accent:    #3b82f6;
	--espc-accent-2:  #2563eb;
	--espc-accent-fg: #ffffff;
	--espc-shadow:    0 4px 16px rgba(15, 23, 42, .06);
}

/* === Theme: dark (legacy) ============================================= */
.espc-theme-dark {
	--espc-bg:        #0b1118;
	--espc-bg-2:      #111827;
	--espc-bg-3:      #1f2937;
	--espc-fg:        #e5e7eb;
	--espc-fg-dim:    #9ca3af;
	--espc-fg-mute:   #6b7280;
	--espc-border:    #1f2937;
	--espc-border-2:  #374151;
	--espc-accent:    #3b82f6;
	--espc-accent-2:  #2563eb;
	--espc-accent-fg: #ffffff;
	--espc-good-bg:   rgba(34, 197, 94, .12);
	--espc-soft-bg:   rgba(245, 158, 11, .12);
	--espc-bad-bg:    rgba(239, 68, 68, .12);
	--espc-shadow:    0 8px 30px rgba(0, 0, 0, .35);
}

/* === Cards =========================================================== */

.espc-card {
	background: var(--espc-bg-2);
	border: 1px solid var(--espc-border);
	border-radius: var(--espc-radius);
	padding: 24px;
	margin-block-end: 16px;
}
.espc-stage-analyzing {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	gap: 12px;
}
.espc-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--espc-border-2);
	border-top-color: var(--espc-accent);
	border-radius: 50%;
	animation: espc-spin 1s linear infinite;
}
.espc-spinner-text { font-weight: 600; margin: 0; }
.espc-spinner-hint { color: var(--espc-fg-mute); margin: 0; font-size: 13px; }
@keyframes espc-spin { to { transform: rotate(360deg); } }

/* === Headings ======================================================== */

.espc-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; text-align: center; }
.espc-subtitle { margin: 0 0 24px; color: var(--espc-fg-dim); text-align: center; font-size: 14px; }
.espc-page-title { margin: 0 0 16px; font-size: 20px; }

/* === Form rows ======================================================= */

.espc-row { margin-block-end: 16px; }
.espc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.espc-row-inline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.espc-row label { display: block; font-weight: 500; margin-block-end: 6px; }
.espc-row input, .espc-row select {
	width: 100%;
	background: var(--espc-bg);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	padding: 10px 12px;
	font: inherit;
	transition: border-color .15s;
}
.espc-row input:focus, .espc-row select:focus {
	outline: none;
	border-color: var(--espc-accent);
}
.espc-row-inline label { margin: 0; flex: 0 0 auto; }
.espc-row-inline input { width: 80px; flex: 0 0 auto; }
.espc-help { color: var(--espc-fg-mute); font-size: 13px; }

.espc-settings-block {
	background: var(--espc-bg);
	border: 1px solid var(--espc-border);
	border-radius: var(--espc-radius-sm);
	padding: 16px;
	margin-block-end: 16px;
}
.espc-settings-block legend {
	padding: 0 8px;
	color: var(--espc-fg-dim);
	font-weight: 600;
	font-size: 13px;
}

/* === Combobox (searchable product picker) ============================ */

.espc-combo {
	position: relative;
	display: block;
}
.espc-combo-input {
	width: 100%;
	background: var(--espc-bg);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	padding: 10px 40px 10px 12px;     /* room for the toggle button on the inline-end */
	font: inherit;
	transition: border-color .15s;
}
[dir="rtl"] .espc-combo-input { padding: 10px 12px 10px 40px; }
.espc-combo-input:focus {
	outline: none;
	border-color: var(--espc-accent);
}
.espc-combo-toggle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 8px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--espc-fg-dim);
	border: none;
	cursor: pointer;
	padding: 0;
}
.espc-combo-toggle:hover { color: var(--espc-fg); }
.espc-combo-list {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 4px);
	z-index: 20;
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--espc-bg-2);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	box-shadow: var(--espc-shadow);
}
.espc-combo-list li[role="option"] {
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.3;
}
.espc-combo-list li[role="option"]:hover,
.espc-combo-list li.is-active {
	background: var(--espc-bg-3);
}
.espc-combo-list li[role="option"][aria-selected="true"] {
	background: var(--espc-accent);
	color: var(--espc-accent-fg);
}
.espc-combo-empty {
	padding: 12px;
	color: var(--espc-fg-mute);
	font-size: 13px;
	text-align: center;
}

/* On transparent theme the dropdown still needs a visible background so the
 * results aren't unreadable against a busy page. */
.espc-theme-transparent .espc-combo-list {
	background: #ffffff;
}

/* === Locked-product banner (direct-link mode) ========================= */

.espc-locked {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 12px 16px;
	margin-block-end: 16px;
	background: var(--espc-good-bg);
	border: 1px solid rgba(22, 163, 74, .25);
	border-radius: var(--espc-radius-sm);
	font-size: 14px;
}
.espc-locked-label { color: var(--espc-fg-dim); }
.espc-locked-name  { color: var(--espc-fg); }

/* === Drop zone ======================================================= */

.espc-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	padding: 24px;
	margin-block-end: 16px;
	background: rgba(255,255,255,0.02);
	border: 2px dashed var(--espc-border-2);
	border-radius: var(--espc-radius);
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .15s;
	color: var(--espc-fg-dim);
	text-align: center;
}
.espc-drop:hover, .espc-drop:focus,
.espc-drop.is-over {
	border-color: var(--espc-accent);
	background: rgba(59, 130, 246, .06);
	color: var(--espc-fg);
}
.espc-drop.has-file {
	border-color: var(--espc-good);
	background: var(--espc-good-bg);
	color: var(--espc-good);
}
.espc-drop-icon { width: 36px; height: 36px; }
.espc-drop-text { font-weight: 600; font-size: 15px; }
.espc-drop-meta { font-size: 12px; color: var(--espc-fg-mute); }
.espc-file-name { font-weight: 500; font-size: 14px; word-break: break-all; }
.espc-file-replace { font-size: 12px; color: var(--espc-fg-mute); }

/* === Requirements block ============================================== */

.espc-requirements {
	background: var(--espc-bg);
	border: 1px solid var(--espc-border);
	border-radius: var(--espc-radius-sm);
	padding: 12px 16px;
	margin-block-end: 16px;
}
.espc-requirements h4 { margin: 0 0 6px; font-size: 13px; color: var(--espc-fg-dim); }
.espc-requirements ul { margin: 0; padding-inline-start: 20px; }
.espc-requirements li { margin-block-end: 2px; }
.espc-description { color: var(--espc-fg-dim); font-size: 13px; margin: 6px 0 0; }

/* === Contact fields (email mode only) ================================ */

.espc-contact-block { margin-block-end: 16px; }

/* === Buttons ========================================================= */

.espc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	background: var(--espc-bg-3);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-pill);
	font: inherit;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.espc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.espc-btn-primary {
	background: var(--espc-accent);
	color: var(--espc-accent-fg);
	border-color: var(--espc-accent);
	width: 100%;
}
.espc-btn-primary:hover:not(:disabled) { background: var(--espc-accent-2); border-color: var(--espc-accent-2); }
.espc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.espc-icon-btn {
	background: transparent;
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	padding: 6px 12px;
	font: inherit;
	cursor: pointer;
}
.espc-icon-btn:hover { background: var(--espc-bg-3); }

/* === Result ========================================================== */

.espc-result {
	padding: 12px 16px;
	border-radius: var(--espc-radius-sm);
	font-size: 14px;
	margin-block-end: 12px;
}
.espc-result-error { background: var(--espc-bad-bg); color: var(--espc-bad); border: 1px solid rgba(239,68,68,.3); }

.espc-results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--espc-bg-2);
	border: 1px solid var(--espc-border);
	border-radius: var(--espc-radius);
	padding: 16px 20px;
	margin-block-end: 16px;
}
.espc-file-hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; word-break: break-all; }
.espc-file-sub { color: var(--espc-fg-dim); font-size: 13px; margin-block-start: 4px; }

.espc-badge {
	padding: 6px 12px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
}
.espc-badge-ok  { background: var(--espc-good-bg); color: var(--espc-good); border: 1px solid rgba(34,197,94,.3); }
.espc-badge-bad { background: var(--espc-bad-bg);  color: var(--espc-bad);  border: 1px solid rgba(239,68,68,.3); }

/* "Check another file" — secondary action sitting next to the status
 * badge so customers see it the moment results render (v1.3.3). */
.espc-results-head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.espc-btn-reset {
	background: var(--espc-bg);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	padding: 8px 16px;
	font: inherit;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.espc-btn-reset:hover {
	background: var(--espc-accent);
	color: var(--espc-accent-fg);
	border-color: var(--espc-accent);
}
.espc-btn-reset:focus-visible {
	outline: 2px solid var(--espc-accent);
	outline-offset: 2px;
}

/* v1.3.5 — advisory banner above the "problem zones" strip when DPI fails.
 * Tells the customer the strip below is NOT the complete picture — the whole
 * image is affected, not just the thumbnails. Pale amber so it reads as an
 * advisory rather than a hard fail (the DPI card already does that job). */
.espc-banner {
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: var(--espc-radius-sm);
	font-size: 13px;
	line-height: 1.5;
}
.espc-banner-warn {
	background: #fff8e6;
	color: #7a4f00;
	border: 1px solid #f5c842;
}

/* v1.4.22 — wrong-size error card ============================== */
.espc-size-mismatch {
	background: #fff4f4;
	border: 1px solid #e98484;
	color: #5d1010;
	padding: 24px;
	margin-top: 12px;
}
.espc-size-mismatch-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: #b51a1a;
}
.espc-size-mismatch-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 16px;
	row-gap: 6px;
	margin: 0 0 16px;
	font-size: 14px;
}
.espc-size-mismatch-grid dt {
	font-weight: 600;
	color: #5d1010;
}
.espc-size-mismatch-grid dd {
	margin: 0;
	color: #2c0707;
}
.espc-size-mismatch-help {
	margin: 0 0 16px;
	font-size: 13px;
	color: #5d1010;
}

/* v1.4.0 — AI Enhance button + result banners ================== */

.espc-btn-enhance {
	display: inline-block;
	margin: 8px 0 16px;
	padding: 10px 18px;
	background: linear-gradient(135deg, #5a7eff 0%, #7c5aff 100%);
	color: #fff;
	border: none;
	border-radius: var(--espc-radius-sm);
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, filter .15s;
	box-shadow: 0 2px 6px rgba(90, 126, 255, 0.25);
}
.espc-btn-enhance::before {
	content: '✨ ';
}
.espc-btn-enhance:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 4px 12px rgba(90, 126, 255, 0.35);
}
.espc-btn-enhance:active {
	transform: translateY(0);
}
.espc-btn-enhance:focus-visible {
	outline: 2px solid #5a7eff;
	outline-offset: 2px;
}
.espc-btn-enhance:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Post-AI banners (success / warn / error) — injected by ai-enhance.js
 * above the results root so the customer sees the outcome immediately. */
.espc-ai-banner {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var(--espc-radius-sm);
	font-size: 14px;
	line-height: 1.5;
}
.espc-ai-banner-success {
	background: #e6f7ec;
	color: #1a7f37;
	border: 1px solid #4ac26b;
}
.espc-ai-banner-warn {
	background: #fff8e6;
	color: #7a4f00;
	border: 1px solid #f5c842;
}
.espc-ai-banner-error {
	background: #fde2e1;
	color: #cf222e;
	border: 1px solid #f5a8a3;
}
.espc-ai-banner-info {
	background: #ddf4ff;
	color: #0969da;
	border: 1px solid #54aeff;
}

.espc-page-card { padding: 20px; }
.espc-page-head { display: flex; gap: 16px; align-items: center; margin-block-end: 16px; flex-wrap: wrap; }
.espc-page-thumb canvas { display: block; max-width: 120px; height: auto; border-radius: 6px; }
.espc-page-title-block h3 { margin: 0; font-size: 16px; }
.espc-page-size { color: var(--espc-fg-dim); font-size: 13px; margin-block-start: 4px; }

.espc-obj { padding: 16px; background: var(--espc-bg); border: 1px solid var(--espc-border); border-radius: var(--espc-radius-sm); margin-block-end: 12px; }
.espc-obj-head { display: flex; gap: 8px; align-items: center; margin-block-end: 12px; flex-wrap: wrap; }
.espc-obj-id { font-family: ui-monospace, monospace; font-size: 13px; color: var(--espc-fg-dim); }

.espc-tag {
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--espc-bg-3);
	color: var(--espc-fg-dim);
	font-weight: 500;
}
.espc-tag-bleed { background: rgba(59,130,246,.12); color: var(--espc-accent); }
.espc-tag-full  { background: rgba(34,197,94,.12); color: var(--espc-good); }

/* v1.4.8 — content kind badges. Photo gets the brand accent; vector/
   gradient/solid get neutral greys so the card doesn't look "flagged"
   when the analyser correctly identifies non-photo content. */
.espc-tag-kind { text-transform: uppercase; letter-spacing: 0.04em; }
.espc-tag-kind-photo          { background: rgba(34,197,94,.14); color: var(--espc-good); }
.espc-tag-kind-vector_flatten { background: rgba(148,163,184,.18); color: var(--espc-fg-dim); }
.espc-tag-kind-gradient       { background: rgba(168,85,247,.14); color: #a855f7; }
.espc-tag-kind-solid          { background: rgba(148,163,184,.10); color: var(--espc-fg-dim); }

/* v1.4.9 — "used N times" badge for same-XObject placements collapsed
   into a single card by groupByXObjectName. */
.espc-tag-instances { background: rgba(59,130,246,.14); color: var(--espc-accent); font-weight: 600; }

/* v1.4.11 — page-level "critical issues" counter strip. Sits at the top
   of each page card before the per-image cards. Green when clean, red
   when there's something the customer must look at. */
.espc-critical-count {
	padding: 10px 14px;
	border-radius: var(--espc-radius-sm);
	font-weight: 600;
	margin-block-end: 12px;
	font-size: 14px;
}
.espc-critical-count-ok  { background: rgba(34,197,94,.12);  color: var(--espc-good); }
.espc-critical-count-bad { background: rgba(239,68,68,.12);  color: var(--espc-bad); }

/* v1.4.12 — "Enhance ALL critical photos" CTA. Sits between the results
   header and the page cards. Same accent style as the per-card Enhance
   button but bigger and full-width so it's the obvious next action. */
.espc-enhance-all-bar {
	display: flex;
	justify-content: center;
	margin-block: 16px;
}
.espc-btn-enhance-all {
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	border-radius: var(--espc-radius-sm);
	background: var(--espc-accent);
	color: var(--espc-accent-fg);
	border: none;
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
	box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.espc-btn-enhance-all::before { content: '✨ '; margin-inline-end: 4px; }
.espc-btn-enhance-all:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
.espc-btn-enhance-all:active { transform: translateY(0); }
.espc-btn-enhance-all:focus-visible { outline: 2px solid var(--espc-accent); outline-offset: 2px; }

/* v1.4.9 — collapsed passing-cards block. <details>/<summary> handles
   the open/close UX natively; we just style the summary row so it looks
   like a card itself, and dim the inner cards so they don't compete
   visually with the flagged-card section above. */
.espc-passing-block {
	margin-block-end: 12px;
	border: 1px solid var(--espc-border);
	border-radius: var(--espc-radius-sm);
	background: var(--espc-bg);
}
.espc-passing-summary {
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 600;
	color: var(--espc-good);
	user-select: none;
	list-style: none;
	position: relative;
}
.espc-passing-summary::-webkit-details-marker { display: none; }
.espc-passing-summary::before {
	content: '▸';
	margin-inline-end: 8px;
	display: inline-block;
	transition: transform 0.15s ease;
	color: var(--espc-fg-dim);
}
.espc-passing-block[open] > .espc-passing-summary::before {
	transform: rotate(90deg);
}
.espc-passing-block .espc-obj {
	margin-inline-start: 16px;
	margin-inline-end:   16px;
	opacity: 0.92;
}
/* RTL — the chevron should point the other way before open. */
[dir="rtl"] .espc-passing-summary::before { content: '◂'; }
[dir="rtl"] .espc-passing-block[open] > .espc-passing-summary::before {
	transform: rotate(-90deg);
}

.espc-obj-preview {
	background: var(--espc-bg-3);
	border-radius: var(--espc-radius-sm);
	padding: 16px;
	margin-block-end: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	/* v1.4.20 — let oversized native-size previews scroll instead of being
	 * shrunk by `max-width:100%`. Required for true 1:1 (Photoshop 100%
	 * equivalent) crop display per client feedback. */
	overflow: auto;
	max-width: 100%;
}
/* v1.4.20 — `max-width: 100%; height: auto` removed: it was the second
 * source of artificial enlargement/blur (large native canvases got
 * scaled-down by CSS into the card width). Canvas now renders at its
 * true pixel size. */
.espc-obj-preview canvas { display: block; border-radius: 4px; }
.espc-obj-preview-cap { color: var(--espc-fg-mute); font-size: 12px; }

/* v1.6.0 — hero page preview (big, centered) ========================== */
.espc-hero-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-block: 12px 20px;
	max-width: 100%;
}
.espc-hero-wrap {
	max-width: 100%;
}
.espc-hero-wrap canvas {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--espc-border, #888);
	border-radius: 4px;
	background: #fff;
}

/* v1.6.0 — Safe Zone overlay + toggle ================================= */
.espc-preview-canvas-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.espc-safe-zone-overlay {
	position: absolute;
	pointer-events: none;
	border: 2px dashed #ff3b3b;
	background: rgba(255, 59, 59, 0.04);
	border-radius: 2px;
	display: none;            /* hidden until toggle flips it on */
	box-sizing: border-box;
}
.espc-preview-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-block: 8px 0;
}
/* Pill switch — same UX shape as the iOS / Material switch the customer
 * mentioned ("right-left toggle"). 36×20 px, smooth transition. */
.espc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.espc-toggle-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px; height: 1px;
}
.espc-toggle-slider {
	position: relative;
	display: inline-block;
	width: 36px; height: 20px;
	background: var(--espc-border, #888);
	border-radius: 999px;
	transition: background 0.15s ease;
}
.espc-toggle-slider::before {
	content: '';
	position: absolute;
	top: 2px; inset-inline-start: 2px;
	width: 16px; height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
	transition: inset-inline-start 0.15s ease;
}
.espc-toggle-input:checked + .espc-toggle-slider {
	background: #ff3b3b;
}
.espc-toggle-input:checked + .espc-toggle-slider::before {
	inset-inline-start: 18px;
}
.espc-toggle-input:focus-visible + .espc-toggle-slider {
	outline: 2px solid var(--espc-accent, #c5dc4a);
	outline-offset: 2px;
}
.espc-toggle-text {
	font-size: 13px;
	font-weight: 500;
	color: var(--espc-fg);
}

/* === Problem zones ==================================================== */

.espc-zones { margin-block-end: 12px; }
.espc-zones-title { font-size: 12px; color: var(--espc-fg-dim); margin-block-end: 6px; }
.espc-zones-grid {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding-block-end: 4px;
}
.espc-zone {
	position: relative;
	flex: 0 0 80px;
	width: 80px; height: 80px;
	padding: 0;
	background: var(--espc-bg-3);
	border: 1px solid var(--espc-border-2);
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
}
.espc-zone canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.espc-zone:hover { border-color: var(--espc-accent); }
.espc-zone-num {
	position: absolute;
	inset-block-end: 2px;
	inset-inline-start: 4px;
	font-size: 10px;
	font-weight: 700;
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

/* === Metric cards ===================================================== */

.espc-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px;
	margin-block-end: 12px;
}
.espc-metric {
	position: relative;
	padding: 10px 14px;
	background: var(--espc-bg-3);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius-sm);
	cursor: help;
}
.espc-metric-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
}
.espc-metric-label { font-size: 12px; color: var(--espc-fg-dim); font-weight: 500; }
.espc-metric-suffix { font-size: 11px; color: var(--espc-fg-mute); }
.espc-metric-value { font-size: 22px; font-weight: 700; line-height: 1.2; }
.espc-metric-note  { font-size: 12px; }

.espc-metric-good { border-color: rgba(34,197,94,.4); background: var(--espc-good-bg); }
.espc-metric-good .espc-metric-value { color: var(--espc-good); }
.espc-metric-good .espc-metric-note  { color: var(--espc-good); }

.espc-metric-soft { border-color: rgba(245,158,11,.4); background: var(--espc-soft-bg); }
.espc-metric-soft .espc-metric-value { color: var(--espc-soft); }
.espc-metric-soft .espc-metric-note  { color: var(--espc-soft); }

.espc-metric-bad,
.espc-metric-borderline { border-color: rgba(239,68,68,.4); background: var(--espc-bad-bg); }
.espc-metric-bad .espc-metric-value,
.espc-metric-borderline .espc-metric-value { color: var(--espc-bad); }
.espc-metric-bad .espc-metric-note,
.espc-metric-borderline .espc-metric-note { color: var(--espc-bad); }

/* v1.4.18 — render-tier classes (pass / warning / fail). Per client spec
   render >= 50 = green pass, 35-50 = amber warning, < 35 = red fail. */
.espc-metric-pass    { border-color: rgba(34,197,94,.4);  background: var(--espc-good-bg); }
.espc-metric-pass    .espc-metric-value, .espc-metric-pass    .espc-metric-note { color: var(--espc-good); }
.espc-metric-warning { border-color: rgba(245,158,11,.4); background: var(--espc-soft-bg); }
.espc-metric-warning .espc-metric-value, .espc-metric-warning .espc-metric-note { color: var(--espc-soft); }
.espc-metric-fail    { border-color: rgba(239,68,68,.4);  background: var(--espc-bad-bg); }
.espc-metric-fail    .espc-metric-value, .espc-metric-fail    .espc-metric-note { color: var(--espc-bad); }

/* Page-level counter strip — amber variant for "warning only, no critical". */
.espc-critical-count-warn { background: rgba(245,158,11,.12); color: var(--espc-soft); }

/* === Tooltip (CSS-only) =============================================== */

[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
	opacity: 0;
	transition: opacity .15s;
	pointer-events: none;
	position: absolute;
}
[data-tooltip]::before {
	content: attr(data-tooltip);
	inset-block-end: calc(100% + 8px);
	inset-inline-start: 0;
	padding: 8px 12px;
	background: var(--espc-bg-3);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
	width: max-content;
	max-width: 280px;
	box-shadow: var(--espc-shadow);
	z-index: 10;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
	opacity: 1;
}
[data-tooltip=""]::before { display: none; }

/* === Size line ======================================================== */

.espc-size-line {
	font-size: 13px;
	color: var(--espc-fg-dim);
	padding: 8px 12px;
	background: var(--espc-bg-3);
	border-radius: var(--espc-radius-sm);
}
.espc-size-line strong { color: var(--espc-fg); }
.espc-size-sub { color: var(--espc-fg-mute); }

/* === Footer (reasons + send) ========================================= */

.espc-footer h3 { margin: 0 0 12px; font-size: 16px; }
.espc-reasons { margin: 0 0 16px; padding-inline-start: 22px; }
.espc-reasons li { margin-block-end: 6px; line-height: 1.5; }
.espc-success { color: var(--espc-good); font-weight: 600; margin: 0 0 16px; }
.espc-success-big { color: var(--espc-good); font-weight: 600; font-size: 18px; text-align: center; padding: 32px 0; }

.espc-accept { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; font-size: 14px; }
.espc-accept input { width: auto; }

/* === Modal ============================================================ */

.espc-modal {
	background: var(--espc-bg-2);
	color: var(--espc-fg);
	border: 1px solid var(--espc-border-2);
	border-radius: var(--espc-radius);
	padding: 0;
	max-width: 95vw;
	max-height: 95vh;
	overflow: hidden;
}
.espc-modal::backdrop { background: rgba(0,0,0,0.85); }
.espc-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-block-end: 1px solid var(--espc-border);
	gap: 12px;
}
.espc-modal-title { font-weight: 600; font-size: 14px; }
.espc-modal-actions { display: flex; gap: 6px; }
.espc-modal-body {
	max-height: calc(95vh - 100px);
	max-width: 95vw;
	overflow: auto;
	padding: 16px;
	/* Centre small canvases; let large ones overflow into scrollbars rather
	 * than shrinking. */
	text-align: center;
}
.espc-modal-body canvas {
	display: inline-block;
	/* v1.4.18 — was `image-rendering: pixelated` which made previews look
	 * pixelated even when source was sharp. Per client feedback (21/5/2026):
	 * "do not visually exaggerate pixelation that does not exist in the
	 * actual source file". Default `auto` lets the browser use smooth
	 * scaling — matches what Photoshop shows at 100%. */
	image-rendering: auto;
	/* Inline width/height come from JS — don't override them here. */
}
.espc-modal-foot {
	padding: 8px 16px;
	border-block-start: 1px solid var(--espc-border);
	color: var(--espc-fg-mute);
	font-size: 12px;
	text-align: center;
}

/* === Empty state ====================================================== */

.espc-empty { color: var(--espc-fg-mute); font-size: 14px; text-align: center; padding: 24px; }

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

@media (max-width: 640px) {
	.espc-row-2 { grid-template-columns: 1fr; }
	.espc-card { padding: 16px; }
	.espc-results-head { padding: 12px; }
	.espc-page-head { gap: 12px; }
	.espc-page-thumb canvas { max-width: 80px; }
	.espc-metrics { grid-template-columns: 1fr 1fr; }
	.espc-zone { flex-basis: 60px; width: 60px; height: 60px; }
}

/* === RTL: tooltip flips automatically thanks to logical properties; only
 *        a couple of edge cases need attention.
 */
[dir="rtl"] .espc-app .espc-zone-num { text-align: right; }

/* === v1.3 — link generator shortcode (flat directory of products) ====== */

.espc-linkgen-card {
	padding: 24px;
}

.espc-linkgen-title {
	margin: 0 0 20px;
	font-size: 18px;
	font-weight: 700;
}

.espc-linkgen-filters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 20px;
}

.espc-linkgen-filter > label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 13px;
	color: var(--espc-fg-dim, #57606a);
}

.espc-linkgen-filter > select,
.espc-linkgen-filter > input[type="search"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 42px;
	padding: 10px 12px;
	font: inherit;
	background: var(--espc-bg, #fff);
	color: var(--espc-fg, #1f2328);
	border: 1px solid var(--espc-border-2, #d0d7de);
	border-radius: var(--espc-radius-sm, 6px);
}

.espc-linkgen-filter > select:focus,
.espc-linkgen-filter > input[type="search"]:focus {
	outline: none;
	border-color: var(--espc-accent, #c5dc4a);
}

@media (max-width: 640px) {
	.espc-linkgen-filters { grid-template-columns: 1fr; }
}

/* List of products — one row per product. Title on the inline-start,
 * Copy button on the inline-end. RTL-aware via logical properties. */
.espc-linkgen-items {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--espc-border-2, #d0d7de);
	border-radius: var(--espc-radius-sm, 6px);
	max-height: 60vh;
	overflow-y: auto;
}

.espc-linkgen-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--espc-border, #eaeef2);
}

.espc-linkgen-item:last-child {
	border-bottom: none;
}

.espc-linkgen-item:hover {
	background: var(--espc-bg-3, #f6f8fa);
}

.espc-linkgen-item-title {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--espc-fg, #1f2328);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.espc-linkgen-copy {
	flex: 0 0 auto;
	background: var(--espc-bg, #fff);
	color: var(--espc-fg, #1f2328);
	border: 1px solid var(--espc-border-2, #d0d7de);
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	transition: background .15s, color .15s, border-color .15s;
}

.espc-linkgen-copy:hover {
	background: var(--espc-accent, #c5dc4a);
	color: var(--espc-accent-fg, #1f2328);
	border-color: var(--espc-accent, #c5dc4a);
}

.espc-linkgen-copy.is-copied {
	background: #1a7f37;
	color: #fff;
	border-color: #1a7f37;
}

.espc-btn-secondary {
	background: var(--espc-bg, #fff);
	color: var(--espc-fg, #1f2328);
	border: 1px solid var(--espc-border-2, #d0d7de);
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}

.espc-btn-secondary:hover {
	background: var(--espc-bg-3, #f6f8fa);
}

.espc-linkgen-empty-state {
	margin: 16px 0 0;
	padding: 24px;
	text-align: center;
	color: var(--espc-fg-mute, #9da4ad);
	font-size: 14px;
}

.espc-empty.espc-error {
	color: #cf222e;
	background: #fde2e1;
	padding: 12px;
	border-radius: 6px;
}