/* AI Image Compare — front-end layout */

.aic-root {
	--tc-bg: #f8fafc;
	--tc-text: #0f172a;
	--tc-card: #ffffff;
	--tc-border: #cbd5e1;
	--tc-section: #215387;
	--tc-button: #215387;
	--tc-button-text: #ffffff;
	--tc-input: #ffffff;
	--tc-upload: #e3f2fd;
	--tc-result: #ffffff;

	--aic-bg: var(--tc-bg);
	--aic-panel: var(--tc-card);
	--aic-border: var(--tc-border);
	--aic-text: var(--tc-text);
	--aic-muted: #64748b;
	--aic-accent: #2196f3;
	--aic-accent-hover: #1e88e5;
	--aic-orange: var(--tc-button);
	--aic-orange-hover: var(--tc-section);
	--aic-dz-bg: var(--tc-upload);
	--aic-dz-border: var(--tc-section);
	--aic-radius: 12px;
	--aic-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	color: var(--aic-text);
	line-height: 1.5;
	max-width: 100vw;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin: 2rem 0;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0 1rem;
	box-sizing: border-box;
}

.aic-root *,
.aic-root *::before,
.aic-root *::after {
	box-sizing: border-box;
}

.color-switch-dark .aic-root,
.aic-skin-dark {
	--tc-bg: #0f1117;
	--tc-text: #ffffff;
	--tc-card: #161b22;
	--tc-border: #2a3441;
	--tc-section: #215387;
	--tc-button: #215387;
	--tc-button-text: #ffffff;
	--tc-input: #0d1117;
	--tc-upload: #161b22;
	--tc-result: #161b22;

	--aic-bg: var(--tc-bg);
	--aic-panel: var(--tc-card);
	--aic-border: var(--tc-border);
	--aic-text: var(--tc-text);
	--aic-muted: #b8c1cc;
	--aic-accent: #58a6ff;
	--aic-accent-hover: #79c0ff;
	--aic-danger: #f85149;
	--aic-orange: var(--tc-button);
	--aic-orange-hover: #2c6eb3;
	--aic-dz-bg: var(--tc-upload);
	--aic-dz-border: var(--tc-button);
	--aic-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Top mode tabs (screenshot-style) */
.aic-mode-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-bottom: 1rem;
	padding: 0.5rem;
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius);
	box-shadow: var(--aic-shadow);
}

.aic-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	flex: 1;
}

.aic-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.7rem;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--aic-bg);
	color: var(--aic-text);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.aic-tab:hover {
	background: color-mix(in srgb, var(--aic-tab-ring, #0d9488) 10%, var(--aic-bg));
}

.aic-tab.is-active {
	border-color: var(--aic-tab-ring, #0d9488);
	background: color-mix(in srgb, var(--aic-tab-ring, #0d9488) 12%, var(--aic-panel));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aic-tab-ring, #0d9488) 35%, transparent);
}

.aic-tab-icon {
	width: 1.15rem;
	height: 1.15rem;
	display: inline-block;
	background: currentColor;
	opacity: 0.85;
	-webkit-mask: var(--aic-ico) center / contain no-repeat;
	mask: var(--aic-ico) center / contain no-repeat;
}

.aic-ico-split { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h8v16H4V4zm8 0h8v16h-8V4z'/%3E%3C/svg%3E"); }
.aic-ico-fade { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-opacity='1'/%3E%3Cstop offset='1' stop-opacity='0.25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='24' height='24' rx='2' fill='url(%23g)'/%3E%3C/svg%3E"); }
.aic-ico-slider { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' opacity='.35'/%3E%3Cpath d='M11 4h2v16h-2z'/%3E%3C/svg%3E"); }
.aic-ico-highlight { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 8V4h4M16 4h4v4M20 16v4h-4M8 20H4v-4'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1' fill='currentColor' stroke='none' opacity='.25'/%3E%3C/svg%3E"); }
.aic-ico-subtract { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16v16H4V4zm4 4h8v8H8V8z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.aic-ico-meta { --aic-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z'/%3E%3C/svg%3E"); }

.aic-color-row {
	display: flex;
	gap: 0.65rem;
	align-items: center;
	margin-top: 0.25rem;
}

.aic-hidden {
	display: none !important;
}

.aic-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aic-pan-zoom-outer {
	overflow: auto;
	max-height: calc(75vh + 4.5cm - 1in);
	touch-action: pan-x pan-y;
	cursor: grab;
	background: var(--aic-bg);
	min-height: calc(120px + 4.5cm - 1in);
}

.aic-pan-zoom-outer.is-dragging {
	cursor: grabbing;
}

.aic-pan-zoom-inner {
	display: inline-block;
	min-width: 100%;
	vertical-align: top;
	transition: transform 0.08s ease-out;
	will-change: transform;
}

.aic-zoom-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.35rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
	padding: 0.35rem 0.25rem;
	font-size: 0.8rem;
	color: var(--aic-muted);
}

.aic-zoom-range {
	width: 120px;
	max-width: 40vw;
}

.aic-zoom-btn {
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	border: 1px solid var(--aic-border);
	background: var(--aic-panel);
	color: var(--aic-text);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.aic-zoom-btn:hover {
	border-color: var(--aic-accent);
}

.aic-zoom-pct {
	min-width: 2.75rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.aic-sr-title {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	font-weight: 700;
}

.aic-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 900px) {
	.aic-layout {
		grid-template-columns: 1fr;
		align-items: start;
	}
}


/* Hiding Compare, Preview, Tabs, Meta, URL rows and thumb list */
.aic-mode-tabs,
.aic-panel-controls,
.aic-url-row-mini,
.aic-thumb-list {
	display: none !important;
}

/* Slider viewport: fill width, no scroll bar from pan-zoom */
.aic-viewport .aic-slider-wrap {
	width: 100%;
	max-height: calc(75vh + 4.5cm - 1in);
	overflow: hidden;
}


/* ── In-place result area ─────────────────────────────── */
.aic-result-area {
	width: 100%;
}

/* Hidden views */
.aic-inline-slider.aic-hidden,
.aic-inline-meta.aic-hidden,
.aic-dropzones-wrapper.aic-hidden {
	display: none !important;
}

/* Inline slider: full width, matches dropzone height */
.aic-inline-slider {
	width: 100%;
	min-height: calc(300px + 4.5cm - 1in);
	border-radius: var(--aic-radius);
	overflow: hidden;
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
}

.aic-inline-slider .aic-slider-wrap {
	width: 100%;
	height: 100%;
	min-height: calc(300px + 4.5cm - 1in);
	max-height: calc(550px + 4.5cm - 1in);
}

/* Inline meta / file details — side-by-side cards */
.aic-inline-meta {
	width: 100%;
}

.aic-meta-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.aic-meta-card {
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius);
	overflow: hidden;
	box-shadow: var(--aic-shadow);
}

.aic-meta-card-title {
	padding: 0.6rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aic-muted);
	border-bottom: 1px solid var(--aic-border);
	background: rgba(0,0,0,0.02);
}

.color-switch-dark .aic-root .aic-meta-card-title,
.aic-skin-dark .aic-meta-card-title {
	background: rgba(255,255,255,0.03);
}

.aic-meta-card-body {
	padding: 0.3rem 0;
}

.aic-meta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid color-mix(in srgb, var(--aic-border) 50%, transparent);
	font-size: 0.85rem;
}

.aic-meta-row:last-child {
	border-bottom: none;
}

.aic-meta-label {
	color: var(--aic-fg);
	font-weight: 600;
}

.aic-meta-value {
	color: var(--aic-muted);
	text-align: right;
}

@media (max-width: 480px) {
	.aic-meta-cards {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
	.aic-meta-row {
		grid-template-columns: 1fr;
		gap: 0.1rem;
		padding: 0.4rem 0.7rem;
	}
	.aic-meta-value {
		text-align: left;
		font-size: 0.8rem;
	}
}

/* Also hide old standalone panel sections (no longer in HTML but keep safe) */
.aic-panel-meta.aic-hidden,
.aic-panel-view.aic-hidden {
	display: none !important;
}


.aic-panel {
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius);
	padding: 1rem 1.1rem;
	box-shadow: var(--aic-shadow);
}

.aic-panel-upload {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

.aic-heading {
	margin: 0 0 0.65rem;
	font-size: 1rem;
	font-weight: 700;
}

.aic-hint {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	color: var(--aic-muted);
}

.aic-dropzones-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
	min-width: 0;
	border: 2px dashed var(--aic-dz-border);
	border-radius: var(--aic-radius);
	overflow: hidden;
}

@media (max-width: 768px) {
	.aic-root {
		width: 100% !important;
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 0.5rem !important;
	}

	.aic-result-toolbar {
		position: sticky;
		top: 0;
		z-index: 1000;
		background: var(--aic-panel);
		border-bottom: 1px solid var(--aic-border);
		border-radius: 0;
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		padding: 0.75rem 1rem;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.aic-dropzones-wrapper {
		display: flex;
		flex-direction: row;
		gap: 12px;
		border: none;
		background: transparent;
	}

	.aic-dropzone-col {
		flex: 1;
		min-width: 0;
	}

	.aic-dropzone-col:first-child {
		border-right: none;
		border-bottom: none;
		padding-bottom: 0;
	}

	.aic-dropzone {
		border: 2px dashed var(--aic-dz-border);
		border-radius: var(--aic-radius);
	}

	.aic-dropzone-title {
		font-size: 18px;
		line-height: 1.3;
	}

	/* Tap target sizing: minimum 44px height */
	.aic-toolbar-btn,
	.aic-tab,
	.aic-btn-browse,
	.aic-dl-opt {
		min-height: 44px;
	}

	.aic-btn-compare-main,
	.aic-btn-clear-top {
		min-height: 48px;
	}
}

.aic-dropzone-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Vertical dashed divider between the two dropzone columns */
.aic-dropzone-col:first-child {
	border-right: 2px dashed var(--aic-dz-border);
}

.aic-actions-top {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}


/* ── Result Toolbar ───────────────────────────────────── */
.aic-result-toolbar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
	padding: 0.5rem 0.8rem;
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: 12px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.aic-result-toolbar.aic-hidden {
	display: none !important;
}

.aic-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.45rem 0.85rem;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--aic-muted);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.aic-toolbar-btn:hover {
	background: rgba(99, 102, 241, 0.08);
	color: var(--aic-accent);
}

.aic-toolbar-btn.aic-toolbar-active {
	background: linear-gradient(135deg, var(--aic-accent), #3b82f6);
	color: #fff;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--aic-accent) 30%, transparent);
}

.aic-toolbar-btn.aic-toolbar-active:hover {
	filter: brightness(1.1);
	color: #fff;
}

.aic-toolbar-btn svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.aic-toolbar-sep {
	width: 1px;
	height: 1.4rem;
	background: var(--aic-border);
	margin: 0 0.35rem;
	flex-shrink: 0;
}

/* Download dropdown */
.aic-toolbar-download-wrap {
	position: relative;
}

.aic-download-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 50;
	min-width: 200px;
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	padding: 0.3rem;
	animation: aic-fade-in 0.15s ease;
}

.aic-download-menu.aic-hidden {
	display: none !important;
}

.aic-dl-opt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 0.8rem;
	border: none;
	border-radius: 7px;
	background: transparent;
	color: var(--aic-fg);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease;
	text-align: left;
}

.aic-dl-opt:hover {
	background: rgba(99, 102, 241, 0.08);
	color: var(--aic-accent);
}

.aic-dl-opt svg {
	flex-shrink: 0;
	opacity: 0.6;
}

.aic-chevron {
	margin-left: 0.15rem;
	transition: transform 0.2s ease;
}

@keyframes aic-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.color-switch-dark .aic-root .aic-toolbar-btn:hover,
.aic-skin-dark .aic-toolbar-btn:hover {
	background: rgba(99, 102, 241, 0.15);
}

/* ── Result area zoom support ─────────────────────────── */
.aic-result-area {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.aic-dropzones-wrapper,
.aic-inline-slider,
.aic-inline-slider .aic-slider-wrap,
.aic-inline-slider .aic-fade-wrap {
	will-change: transform;
	transform-origin: center center;
}

/* Keep images & canvases crisp when zoomed */
.aic-result-area img,
.aic-result-area canvas {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

@media (max-width: 600px) {
	.aic-toolbar-btn span {
		display: none;
	}
	.aic-toolbar-btn {
		padding: 0.45rem;
	}
	.aic-toolbar-btn svg {
		width: 18px;
		height: 18px;
	}
}

/* ── Old result button styles (kept for fallback compat) ── */
.aic-btn-result {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--aic-accent);
	border-radius: 50px;
	background: transparent;
	color: var(--aic-accent);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
}

.aic-btn-result:hover {
	background: var(--aic-accent);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--aic-accent) 35%, transparent);
}

.aic-btn-result svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* Clear All button (right of Compare) */
.aic-btn-clear-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid #ef4444;
	border-radius: 50px;
	background: transparent;
	color: #ef4444;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
}

.aic-btn-clear-top:hover {
	border-color: #dc2626;
	color: #fff;
	background: #ef4444;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
}

.aic-btn-clear-top svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.color-switch-dark .aic-root .aic-btn-clear-top,
.aic-skin-dark .aic-btn-clear-top {
	border-color: var(--aic-border);
}


.aic-btn-compare-main {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: linear-gradient(135deg, var(--aic-orange), var(--aic-orange-hover));
	color: #fff;
	border: 2px solid var(--aic-orange);
	border-radius: 50px;
	padding: 0.7rem 1.9rem; /* Adjusted for border */
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--aic-orange) 40%, transparent);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aic-btn-compare-main:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 25px color-mix(in srgb, var(--aic-orange) 50%, transparent);
	background: #fff;
	color: var(--aic-orange);
	border-color: var(--aic-orange);
}

.aic-btn-compare-main:active {
	transform: translateY(1px);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--aic-orange) 30%, transparent);
}

.aic-btn-compare-main svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Hide file input but keep it functional */
.aic-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.aic-dropzone {
	position: relative;
	border: none;
	border-radius: 0;
	padding: 2rem 1rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.25s ease;
	background: var(--aic-dz-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(280px + 4.5cm - 1in);
	max-height: calc(480px + 4.5cm - 1in);
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	flex: 1;
}

@media (min-width: 600px) {
	.aic-dropzone {
		min-width: calc(450px + 1.5cm);
	}
}

/* When an image is loaded, shrink to fit viewport so Compare button stays visible */
.aic-dropzone.has-image {
	padding: 0;
	align-items: stretch;
	min-height: calc(150px + 4.5cm - 1in);
	max-height: min(calc(550px + 4.5cm - 1in), calc(100vh - 260px + 4.5cm - 1in));
	overflow: auto;
}

/* Ensure grab cursor is shown when zoomed */
.aic-dropzones-wrapper.aic-zoomed,
.aic-inline-slider.aic-zoomed,
.aic-slider-wrap.aic-zoomed,
.aic-fade-wrap.aic-zoomed {
	cursor: grab;
}

.aic-dropzones-wrapper.aic-zoomed:active,
.aic-inline-slider.aic-zoomed:active,
.aic-slider-wrap.aic-zoomed:active,
.aic-fade-wrap.aic-zoomed:active {
	cursor: grabbing;
}

.aic-dropzone:hover,
.aic-dropzone:focus {
	outline: none;
	border-color: var(--aic-accent-hover);
	background: #bbdefb;
}

/* Preview image — scales to fit viewport height so Compare button stays visible */
.aic-preview-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: min(calc(550px + 4.5cm - 1in), calc(100vh - 260px + 4.5cm - 1in));
	object-fit: contain;
	border-radius: 0;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

/* Composite canvas (image B + diff boxes) — scales to fit viewport */
.aic-dots-canvas {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: min(calc(550px + 4.5cm - 1in), calc(100vh - 260px + 4.5cm - 1in));
	object-fit: contain;
	pointer-events: none;
	border-radius: 0;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.aic-dropzone-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.aic-dropzone-icon {
	color: var(--aic-muted);
	margin-bottom: 0.75rem;
	display: flex;
}

.aic-dropzone-text-main {
	display: block;
	font-size: 0.95rem;
	color: var(--aic-text);
	font-weight: 500;
	margin-bottom: 0.25rem;
}

.aic-dropzone-text-sub {
	display: block;
	font-size: 0.85rem;
	color: var(--aic-muted);
	margin-bottom: 1.5rem;
	opacity: 0.8;
}

.aic-dropzone-title {
	font-size: 1.6rem;
	font-weight: 500;
	color: #1a1d24;
	margin-bottom: 1.5rem;
}

.aic-dz-footer {
	position: absolute;
	bottom: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.aic-dz-secure {
	color: #2e7d32;
	display: flex;
	align-items: center;
}

.aic-dz-cloud-icons {
	display: flex;
	gap: 12px;
	align-items: center;
}

.aic-dz-cloud-icons svg {
	width: 20px;
	height: 20px;
	opacity: 0.9;
}

.aic-btn-browse {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aic-orange);
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(33, 83, 135, 0.25);
	white-space: nowrap;
	min-width: 120px;
}

.aic-btn-browse:hover {
	background: var(--aic-orange-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(33, 83, 135, 0.35);
}

.color-switch-dark .aic-root .aic-btn-browse,
.aic-skin-dark .aic-btn-browse {
	background: var(--tc-button);
}

.color-switch-dark .aic-root .aic-btn-browse:hover,
.aic-skin-dark .aic-btn-browse:hover {
	background: var(--aic-orange-hover);
}

.aic-file-input {
	display: none;
}

.aic-url-row-mini {
	margin-top: 0.75rem;
	display: flex;
	gap: 0.5rem;
}

.aic-url-row-mini .aic-url-input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--aic-border);
	border-radius: 8px;
	background: var(--aic-panel);
	color: var(--aic-text);
	font-size: 0.85rem;
}

.aic-url-row-mini .aic-btn {
	white-space: nowrap;
}
.aic-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--aic-muted);
}

.aic-url-input {
	width: 100%;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--aic-border);
	border-radius: 8px;
	background: var(--aic-panel);
	color: var(--aic-text);
	font-size: 0.9rem;
}

.aic-select {
	width: 100%;
	padding: 0.45rem 0.5rem;
	border: 1px solid var(--aic-border);
	border-radius: 8px;
	background: var(--aic-panel);
	color: var(--aic-text);
	font-size: 0.9rem;
}

.aic-row {
	margin-bottom: 0.65rem;
}

.aic-row-pair .aic-label {
	margin-top: 0.35rem;
}

.aic-row-pair .aic-label:first-child {
	margin-top: 0;
}

.aic-range {
	width: 100%;
}

.aic-color {
	width: 100%;
	height: 36px;
	padding: 0;
	border: 1px solid var(--aic-border);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
}

.aic-checkbox-wrap {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	font-size: 0.88rem;
	cursor: pointer;
	color: var(--aic-text);
}

.aic-checkbox-wrap input {
	margin-top: 0.15rem;
}

.aic-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.aic-btn {
	appearance: none;
	border: none;
	border-radius: 8px;
	padding: 0.55rem 0.95rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
}

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

.aic-btn-primary {
	background: var(--aic-accent);
	color: #fff;
}

.aic-btn-primary:hover {
	background: var(--aic-accent-hover);
}

.aic-btn-secondary {
	background: var(--aic-bg);
	color: var(--aic-text);
	border: 1px solid var(--aic-border);
}

.aic-btn-secondary:hover {
	border-color: var(--aic-accent);
}

.aic-thumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	min-height: 0;
}

.aic-thumb {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--aic-border);
	background: var(--aic-bg);
	flex-shrink: 0;
}

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

.aic-thumb-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.aic-thumb-remove:hover {
	background: rgba(185, 28, 28, 0.9);
}

.aic-stats {
	margin-top: 0.75rem;
	font-size: 0.85rem;
	color: var(--aic-muted);
}

.aic-stats strong {
	color: var(--aic-text);
}

.aic-viewport-wrap {
	position: relative;
	width: 100%;
	background: var(--aic-bg);
	border-radius: var(--aic-radius);
	border: 1px solid var(--aic-border);
	overflow: hidden;
	min-height: 200px;
}

.aic-viewport {
	position: relative;
	width: 100%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.aic-viewport-hidden {
	display: none;
}

.aic-viewport:not(.aic-viewport-hidden) {
	display: block;
}

.aic-view-canvas,
.aic-view-layer {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.aic-slider-wrap {
	position: relative;
	overflow: hidden;
	cursor: ew-resize;
	width: 100%;
	touch-action: none;
}

.aic-slider-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	margin-left: -2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 12px rgba(0, 0, 0, 0.2);
	z-index: 3;
	pointer-events: none;
}

.aic-slider-handle {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	margin-top: -18px;
	border-radius: 50%;
	background: var(--aic-accent);
	border: 3px solid #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 4;
	pointer-events: none;
}

.aic-side-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

@media (max-width: 520px) {
	.aic-side-grid {
		grid-template-columns: 1fr;
	}
}

.aic-export {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.aic-table-wrap {
	overflow-x: auto;
	border-radius: var(--aic-radius);
	border: 1px solid var(--aic-border);
}

.aic-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}

.aic-table th,
.aic-table td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--aic-border);
	text-align: left;
	white-space: nowrap;
}

.aic-table th {
	background: var(--aic-bg);
	font-weight: 600;
	color: var(--aic-muted);
}

.aic-panel-meta {
	margin-top: 1rem;
}

.aic-ux-tip {
	margin-top: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: color-mix(in srgb, var(--aic-accent) 12%, var(--aic-bg));
	border-radius: 8px;
	font-size: 0.85rem;
	color: var(--aic-text);
}

.aic-ux-tip:empty {
	display: none;
}

.aic-errors {
	margin-top: 0.75rem;
	padding: 0.65rem 0.75rem;
	border-radius: 8px;
	background: color-mix(in srgb, var(--aic-danger) 14%, var(--aic-bg));
	color: var(--aic-danger);
	font-size: 0.88rem;
	font-weight: 600;
}

.aic-errors:empty {
	display: none;
}

@media print {
	.aic-panel-upload,
	.aic-panel-controls,
	.aic-export,
	.aic-ux-tip,
	.aic-errors,
	.aic-dropzone,
	.aic-url-row,
	.aic-actions,
	.aic-zoom-bar,
	.aic-mode-tabs {
		display: none !important;
	}
	.aic-layout {
		display: block;
	}
	.aic-panel {
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

/* ── Popup Notification ───────────────────────────────── */
.aic-popup {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	z-index: 10000;
	padding: 0.8rem 1.4rem;
	border-radius: 10px;
	font-size: 0.88rem;
	font-weight: 600;
	box-shadow: 0 8px 30px rgba(0,0,0,0.18);
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	max-width: 90vw;
	text-align: center;
	pointer-events: none;
}

.aic-popup-show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.aic-popup-error {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.aic-popup-icon {
	margin-right: 0.3rem;
}

/* ── Download Preview Modal ──────────────────────────── */
.aic-dl-preview-overlay {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: aic-fade-in 0.2s ease;
	padding: 1rem;
}

.aic-dl-preview-overlay.aic-hidden {
	display: none !important;
}

.aic-dl-preview-card {
	background: var(--aic-panel, #fff);
	border: 1px solid var(--aic-border, #cbd5e1);
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: aic-modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes aic-modal-pop {
	from { opacity: 0; transform: scale(0.92) translateY(12px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}

.aic-dl-preview-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--aic-border, #e2e8f0);
}

.aic-dl-preview-title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--aic-text, #0f172a);
}

.aic-dl-preview-close {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--aic-muted, #64748b);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.aic-dl-preview-close:hover {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.aic-dl-preview-body {
	flex: 1;
	overflow: auto;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aic-bg, #f8fafc);
	min-height: 120px;
}

.aic-dl-preview-img {
	display: block;
	max-width: 100%;
	max-height: 55vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.aic-dl-preview-info {
	padding: 0.6rem 1.25rem;
	font-size: 0.82rem;
	color: var(--aic-muted, #64748b);
	border-top: 1px solid var(--aic-border, #e2e8f0);
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.aic-dl-preview-info:empty {
	display: none;
}

.aic-dl-preview-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--aic-border, #e2e8f0);
}

.aic-dl-preview-cancel {
	padding: 0.55rem 1.3rem;
	border: 2px solid var(--aic-border, #cbd5e1);
	border-radius: 50px;
	background: transparent;
	color: var(--aic-text, #0f172a);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}

.aic-dl-preview-cancel:hover {
	border-color: var(--aic-muted, #94a3b8);
	background: var(--aic-bg, #f1f5f9);
}

.aic-dl-preview-confirm {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.5rem;
	border: none;
	border-radius: 50px;
	background: linear-gradient(135deg, #22c55e, #16a34a);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

.aic-dl-preview-confirm:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
	filter: brightness(1.08);
}

.aic-dl-preview-confirm svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

@media (max-width: 520px) {
	.aic-dl-preview-card {
		max-width: 100%;
		border-radius: 12px;
	}
	.aic-dl-preview-img {
		max-height: 40vh;
	}
	.aic-dl-preview-actions {
		flex-direction: column;
	}
	.aic-dl-preview-cancel,
	.aic-dl-preview-confirm {
		width: 100%;
		justify-content: center;
	}
}



/* Comparison settings panel */
.aic-compare-settings-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1.25rem;
	background: var(--aic-panel);
	border: 1px solid var(--aic-border);
	border-radius: var(--aic-radius);
	box-shadow: var(--aic-shadow);
	flex-wrap: wrap;
}

.aic-settings-col {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.aic-settings-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--aic-muted);
	white-space: nowrap;
}

.aic-comp-engine,
.aic-user-sensitivity {
	width: auto;
	min-width: 140px;
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--aic-border);
	border-radius: 6px;
	font-size: 0.85rem;
	background-color: var(--aic-bg);
	color: var(--aic-text);
	cursor: pointer;
}

.aic-comp-engine {
	min-width: 180px;
}

.aic-min-size-slider {
	width: 120px;
	cursor: pointer;
}

.aic-settings-col-checkbox {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.aic-settings-col-checkbox .aic-checkbox-wrap {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--aic-text);
	cursor: pointer;
}

.aic-settings-col-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	border: 1px solid var(--aic-border);
	border-radius: 4px;
	cursor: pointer;
	accent-color: var(--aic-accent);
}

.aic-targeted-actions-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-left: 2px solid var(--aic-border);
	padding-left: 1.25rem;
}

@media (max-width: 768px) {
	.aic-targeted-actions-col {
		border-left: none;
		padding-left: 0;
		border-top: 2px solid var(--aic-border);
		padding-top: 0.75rem;
		width: 100%;
	}
}

/* Targeted mode selection rectangle */
.aic-selection-rect {
	position: absolute;
	border: 2px dashed #2563eb;
	background: rgba(37, 99, 235, 0.18);
	z-index: 25;
	pointer-events: none;
	display: none;
	border-radius: 4px;
	box-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.aic-selection-active .aic-selection-rect {
	display: block;
}

/* Progress Overlay for background worker comparisons */
.aic-progress-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 100;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	border-radius: var(--aic-radius);
	animation: aic-fade-in 0.25s ease-out;
}

.aic-progress-container {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border-radius: 16px;
	padding: 2.25rem 2.5rem;
	width: 100%;
	max-width: 420px;
	text-align: center;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	animation: aic-scale-up 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.color-switch-dark .aic-root .aic-progress-container,
.aic-skin-dark .aic-progress-container {
	background: rgba(30, 41, 59, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.aic-progress-status-text {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.85rem;
	color: var(--aic-text);
}

.aic-progress-bar-wrap {
	width: 100%;
	height: 10px;
	background: color-mix(in srgb, var(--aic-text) 10%, transparent);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
	margin-bottom: 0.65rem;
}

.aic-progress-bar {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #2196f3, #00e5ff);
	border-radius: 999px;
	transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}

.aic-progress-percentage {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--aic-muted);
}

@keyframes aic-scale-up {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

.aic-dropzone-filename {
	position: absolute;
	top: 10px;
	background: rgba(15, 23, 42, 0.78);
	color: #ffffff;
	padding: 6px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	border-radius: 6px;
	white-space: nowrap;
	max-width: 85%;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 30;
	pointer-events: none;
	text-align: center;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	display: none;
}

.aic-dropzone-col:first-child .aic-dropzone-filename {
	left: 10px;
}

.aic-dropzone-col:last-child .aic-dropzone-filename {
	right: 10px;
}

.aic-dropzone.has-image .aic-dropzone-filename {
	display: block;
}

@media (max-width: 480px) {
	.aic-dropzones-wrapper {
		gap: 8px !important;
	}

	.aic-preview-img,
	.aic-dots-canvas {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	/* On mobile, toolbar button labels hide, just icons remain */
	.aic-result-toolbar .aic-toolbar-btn span {
		display: none !important;
	}

	.aic-result-toolbar .aic-toolbar-btn {
		padding: 0.6rem !important;
	}
}

/* --- User Requested Kadence Dark Mode Overrides --- */
/* Body and wrappers */
.aic-root, .aic-viewport-wrap, .aic-pan-zoom-outer, .aic-progress-overlay {
	background: var(--tc-bg);
	color: var(--tc-text);
}

/* Cards and panels */
.aic-panel, .aic-meta-card, .aic-dl-preview-card, .aic-progress-container, .aic-mode-tabs {
	background: var(--tc-card);
	border-color: var(--tc-border);
}

/* Blue sections currently using #215387 */
.aic-btn-compare-main, .aic-btn-browse {
	border-color: var(--tc-button);
}

/* Buttons */
.aic-btn-primary, .aic-btn-result, .aic-btn-compare-main, .aic-btn-browse, .aic-toolbar-btn.aic-toolbar-active {
	background: var(--tc-button);
	color: var(--tc-button-text);
}

.color-switch-dark .aic-root .aic-btn-primary:hover,
.color-switch-dark .aic-root .aic-btn-result:hover,
.color-switch-dark .aic-root .aic-btn-compare-main:hover,
.color-switch-dark .aic-root .aic-toolbar-btn.aic-toolbar-active:hover,
.aic-skin-dark .aic-btn-primary:hover,
.aic-skin-dark .aic-btn-result:hover,
.aic-skin-dark .aic-btn-compare-main:hover,
.aic-skin-dark .aic-toolbar-btn.aic-toolbar-active:hover {
	background: var(--aic-orange-hover) !important;
	color: #fff !important;
	border-color: var(--aic-orange-hover) !important;
}

/* Textareas / Inputs */
.aic-root textarea, .aic-url-input, .aic-select, .aic-comp-engine, .aic-user-sensitivity {
	background: var(--tc-input);
	color: var(--tc-text);
	border: 1px solid var(--tc-border);
}

/* Upload boxes */
.aic-dropzone {
	background: var(--tc-upload);
	border-color: var(--tc-button);
}

.color-switch-dark .aic-root .aic-dropzone:hover,
.color-switch-dark .aic-root .aic-dropzone:focus,
.aic-skin-dark .aic-dropzone:hover,
.aic-skin-dark .aic-dropzone:focus {
	background: #1f242c !important;
	border-color: var(--tc-button) !important;
}

/* Diff result panels */
.aic-inline-slider, .aic-result-toolbar {
	background: var(--tc-result);
	color: var(--tc-text);
}

/* Dropdowns and selects */
.aic-download-menu {
	background: var(--tc-input);
	color: var(--tc-text);
	border-color: var(--tc-border);
}

/* Tables */
.aic-table-wrap, .aic-table th, .aic-table td {
	background: var(--tc-card);
	color: var(--tc-text);
	border-color: var(--tc-border);
}

/* Icons */
.aic-tab-icon, .aic-toolbar-btn svg, .aic-dl-opt svg {
	color: var(--tc-text);
	stroke: var(--tc-text);
}

/* Scrollbars */
.aic-root ::-webkit-scrollbar-thumb {
	background: var(--tc-border);
}