/* ============================================================
   Image Tools Kit — tool UI styles (loaded on tool pages)
   ============================================================ */

.itk-stage {
	display: grid;
	gap: var(--itk-space-4);
}

/* -- upload zone (bootstrapped by toolkit.js) -- */
.itk-upload-zone {
	position: relative;
	border: 1.5px dashed var(--itk-border);
	border-radius: var(--itk-radius);
	padding: var(--itk-space-8) var(--itk-space-5);
	text-align: center;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
	background: var(--itk-surface);
}
.itk-upload-zone:hover,
.itk-upload-zone--over {
	border-color: var(--itk-accent);
	background: color-mix(in srgb, var(--itk-accent) 4%, var(--itk-surface));
}
.itk-upload-zone__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--itk-accent) 12%, transparent);
	color: var(--itk-accent);
	margin-bottom: var(--itk-space-3);
}
.itk-upload-zone h4 {
	margin: 0 0 4px;
	font: var(--itk-font-body);
	font-weight: 600;
}
.itk-upload-zone p {
	margin: 0;
	font-size: .85rem;
	color: var(--itk-text-faint);
}
.itk-upload-zone input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

/* file info bar */
.itk-fileinfo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--itk-space-2) var(--itk-space-5);
	align-items: center;
	padding: var(--itk-space-3) var(--itk-space-4);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius);
	background: var(--itk-surface-2);
	font-size: .85rem;
}
.itk-fileinfo__name {
	font-weight: 600;
	word-break: break-all;
}
.itk-fileinfo__meta {
	color: var(--itk-text-faint);
}

/* -- status / alerts -- */
.itk-status[hidden],
[hidden] {
	display: none !important;
}
.itk-status {
	display: flex;
	align-items: center;
	gap: var(--itk-space-2);
	padding: var(--itk-space-3) var(--itk-space-4);
	border-radius: var(--itk-radius);
	font-size: .9rem;
	background: var(--itk-surface-2);
	border: 1px solid var(--itk-border);
}
.itk-status--success { border-color: color-mix(in srgb, var(--itk-success) 45%, transparent); color: var(--itk-success); }
.itk-status--error { border-color: color-mix(in srgb, var(--itk-error) 45%, transparent); color: var(--itk-error); }

.itk-alert {
	display: flex;
	gap: var(--itk-space-3);
	align-items: flex-start;
	padding: var(--itk-space-3) var(--itk-space-4);
	border-radius: var(--itk-radius);
	font-size: .9rem;
	line-height: 1.5;
	margin: var(--itk-space-3) 0;
	border: 1px solid var(--itk-border);
	background: var(--itk-surface-2);
}
.itk-alert--info { border-color: color-mix(in srgb, var(--itk-accent) 40%, transparent); }
.itk-alert--success { border-color: color-mix(in srgb, var(--itk-success) 40%, transparent); }
.itk-alert--warn { border-color: color-mix(in srgb, var(--itk-warning) 45%, transparent); }
.itk-alert--error { border-color: color-mix(in srgb, var(--itk-error) 45%, transparent); }
.itk-alert__icon { flex: 0 0 auto; margin-top: 2px; color: inherit; }
.itk-mt-0 { margin-top: 0; }
.itk-mt-2 { margin-top: var(--itk-space-2); }
.itk-mt-3 { margin-top: var(--itk-space-3); }
.itk-mt-4 { margin-top: var(--itk-space-4); }

/* -- controls -- */
.itk-field {
	display: grid;
	gap: var(--itk-space-1);
	margin-bottom: var(--itk-space-3);
}
.itk-field__label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--itk-text-faint);
}
.itk-field__label span { color: var(--itk-accent); }
.itk-input,
.itk-select,
.itk-textarea {
	width: 100%;
	font: var(--itk-font-body);
	font-size: .9rem;
	color: var(--itk-text);
	background: var(--itk-surface-2);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	padding: var(--itk-space-3);
	transition: border-color .15s ease;
	resize: vertical;
}
.itk-input:focus,
.itk-select:focus,
.itk-textarea:focus {
	outline: none;
	border-color: var(--itk-accent);
}
.itk-select {
	cursor: pointer;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--itk-text-faint) 50%),
		linear-gradient(135deg, var(--itk-text-faint) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 34px;
}

.itk-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--itk-border);
	outline: none;
	margin: var(--itk-space-2) 0;
	cursor: pointer;
}
.itk-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--itk-accent);
	border: 2px solid var(--itk-bg);
	box-shadow: 0 0 0 1px var(--itk-accent), 0 0 12px color-mix(in srgb, var(--itk-accent) 55%, transparent);
}
.itk-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--itk-accent);
	border: 2px solid var(--itk-bg);
	box-shadow: 0 0 0 1px var(--itk-accent);
}

/* format-switch grid (convert) */
.itk-fmt-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: var(--itk-space-3);
	align-items: end;
}
.itk-fmt-arrow { padding-bottom: var(--itk-space-3); color: var(--itk-text-faint); }

/* -- result grid -- */
.itk-result {
	display: grid;
	gap: var(--itk-space-3);
}
.itk-result__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--itk-space-3);
}
.itk-result__cell {
	display: grid;
	gap: 4px;
	padding: var(--itk-space-3) var(--itk-space-4);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	background: var(--itk-surface);
}
.itk-result__cell span {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--itk-text-faint);
}
.itk-result__cell strong {
	font-size: 1.05rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
.itk-result__cell--success strong { color: var(--itk-success); }
.itk-result__cell--accent strong { color: var(--itk-accent); }
.itk-result__cell--error strong { color: var(--itk-error); }

.itk-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--itk-space-3);
	margin-top: var(--itk-space-2);
}

/* privacy note chip */
.itk-privacy-note {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .78rem;
	color: var(--itk-success);
	border: 1px solid color-mix(in srgb, var(--itk-success) 35%, transparent);
	background: color-mix(in srgb, var(--itk-success) 6%, transparent);
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: var(--itk-space-3);
}

/* findings (SEO / privacy checks) */
.itk-finding {
	display: flex;
	align-items: center;
	gap: var(--itk-space-2);
	font-size: .9rem;
}
.itk-finding__icon { flex: 0 0 auto; display: inline-flex; }
.itk-finding__label { font-weight: 600; }
.itk-finding__value {
	margin-left: auto;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
}
.itk-finding__note {
	font-size: .8rem;
	color: var(--itk-text-faint);
	margin: 2px 0 var(--itk-space-3) 30px;
	line-height: 1.45;
}
.itk-seo-list { display: grid; gap: var(--itk-space-1); }

/* metadata report */
.itk-meta-group { margin-bottom: var(--itk-space-3); }
.itk-meta-group h5 {
	margin: 0 0 var(--itk-space-2);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--itk-accent);
}
.itk-meta-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--itk-space-3);
	padding: 6px 0;
	border-bottom: 1px solid var(--itk-border);
	font-size: .86rem;
}
.itk-meta-row span { color: var(--itk-text-faint); }
.itk-meta-row strong { font-weight: 600; text-align: right; word-break: break-word; }

/* color */
.itk-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--itk-space-2); margin-bottom: var(--itk-space-3); }
.itk-swatch {
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	height: 64px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 6px;
	cursor: pointer;
	font-size: .72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}
.itk-swatch:hover { transform: translateY(-2px); box-shadow: var(--itk-shadow-lg); }
.itk-dominant {
	display: flex;
	align-items: center;
	gap: var(--itk-space-4);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius);
	padding: var(--itk-space-4);
	background: var(--itk-surface);
	margin-bottom: var(--itk-space-3);
}
.itk-dominant__chip {
	width: 72px;
	height: 72px;
	border-radius: var(--itk-radius-sm);
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .3);
}
.itk-dominant__meta { display: grid; gap: 2px; }
.itk-dominant__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--itk-text-faint); }
.itk-dominant__hex { font-size: 1.1rem; }
.itk-dominant__share { font-size: .78rem; color: var(--itk-text-faint); }
.itk-picker-canvas {
	width: 100%;
	height: auto;
	max-width: 520px;
	border-radius: var(--itk-radius);
	border: 1px solid var(--itk-border);
	cursor: crosshair;
	background: repeating-conic-gradient(#d8d8d8 0 25%, #eee 0 50%) 0 0/16px 16px;
}
.itk-picker-chip__copy { margin-left: auto; }

/* compare */
.itk-compare-hint {
	display: flex;
	align-items: center;
	gap: var(--itk-space-2);
	font-size: .86rem;
	color: var(--itk-text-faint);
	background: var(--itk-surface-2);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	padding: var(--itk-space-3);
	margin-bottom: var(--itk-space-3);
}
.itk-compare-stage {
	--cmp-pos: 50%;
	position: relative;
	width: 100%;
	height: 340px;
	border-radius: var(--itk-radius);
	overflow: hidden;
	border: 1px solid var(--itk-border);
	background: repeating-conic-gradient(#d8d8d8 0 25%, #eee 0 50%) 0 0/16px 16px;
}
.itk-compare-slot {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.itk-compare-slot--loaded { cursor: default; }
.itk-compare-slot__label {
	background: rgba(10, 10, 14, .7);
	color: #fff;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 999px;
}
.itk-compare-slot.itk-compare-slot--loaded#itk-cmp-before { width: var(--cmp-pos); border-right: 2px solid var(--itk-accent); }
.itk-compare-slot.itk-compare-slot--loaded#itk-cmp-after { left: var(--cmp-pos); }
.itk-compare-slot--loaded .itk-compare-slot__label { display: none; }
.itk-diff-canvas { width: 100%; max-height: 480px; border-radius: var(--itk-radius); border: 1px solid var(--itk-border); background: #000; }

/* crop / editor canvases */
.itk-crop-canvas,
.itk-editor-canvas {
	width: 100%;
	max-height: 480px;
	border-radius: var(--itk-radius);
	border: 1px solid var(--itk-border);
	background: #000;
	touch-action: none;
}
.itk-resize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--itk-space-3); }
.itk-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--itk-space-2) var(--itk-space-3); }
.itk-editor-toggles { display: flex; flex-wrap: wrap; gap: var(--itk-space-2); margin-top: var(--itk-space-2); }
.itk-editor-toggles input[type="checkbox"] { margin-right: 6px; }
.itk-color-replace { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--itk-space-3); }
.itk-color-replace input[type="color"] {
	width: 100%;
	height: 42px;
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	background: var(--itk-surface-2);
	padding: 3px;
	cursor: pointer;
}
.itk-export { display: grid; gap: var(--itk-space-2); }

/* multi-file batch queues (compress / convert / resize) */
.itk-batch { display: grid; gap: var(--itk-space-2); }
.itk-batch__head { font-size: .85rem; font-weight: 700; }
.itk-batch__rows { display: grid; gap: var(--itk-space-2); }
.itk-batch__row {
	display: flex;
	align-items: center;
	gap: var(--itk-space-3);
	padding: var(--itk-space-2) var(--itk-space-3);
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius-sm);
	background: var(--itk-surface-2);
	font-size: .85rem;
}
.itk-batch__thumb { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; border: 1px solid var(--itk-border); background: #000; display: flex; }
.itk-batch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.itk-batch__name { font-weight: 600; word-break: break-word; }
.itk-batch__status { margin-left: auto; text-align: right; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--itk-text-faint); }
.itk-batch__status--ok { color: var(--itk-success); }
.itk-batch__status--error { color: var(--itk-error); }
.itk-batch__pct { font-weight: 700; }
.itk-batch__pct--ok { color: var(--itk-success); }
.itk-batch__size { color: var(--itk-text-faint); }
.itk-batch__progress { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--itk-accent); animation: itk-blink 1s infinite alternate; }

/* bg-remover toolbar + zoomable stage */
.itk-bg-toolbar { display: flex; flex-wrap: wrap; gap: var(--itk-space-2); align-items: center; margin-bottom: var(--itk-space-3); }
.itk-bg-toolbar__group { display: flex; gap: 4px; }
.itk-bg-toolbar__sep { width: 1px; height: 22px; background: var(--itk-border); margin: 0 2px; }
.itk-btn--warn { background: color-mix(in srgb, var(--itk-warning) 14%, transparent); color: var(--itk-warning); border-color: color-mix(in srgb, var(--itk-warning) 35%, var(--itk-border)); }
.itk-btn--warn:hover { background: color-mix(in srgb, var(--itk-warning) 24%, transparent); }
.itk-btn--active {
	background: color-mix(in srgb, var(--itk-accent) 18%, var(--itk-surface-2));
	border-color: color-mix(in srgb, var(--itk-accent) 55%, var(--itk-border));
	color: var(--itk-accent);
}
.itk-bg-zoomval { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--itk-text-faint); min-width: 44px; text-align: center; }
.itk-bg-stage {
	position: relative;
	overflow: auto;
	border: 1px solid var(--itk-border);
	border-radius: var(--itk-radius);
	background: repeating-conic-gradient(#d8d8d8 0 25%, #eee 0 50%) 0 0/16px 16px;
	max-height: 480px;
	padding: var(--itk-space-3);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.itk-bg-stage canvas { transform-origin: top left; border-radius: var(--itk-radius-sm); box-shadow: var(--itk-shadow-lg); display: block; }
.itk-bg-count { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--itk-text-faint); }

/* color palette preview + live color info */
.itk-palette-preview { margin-bottom: var(--itk-space-3); }
.itk-palette-preview canvas { width: 100%; max-height: 220px; border-radius: var(--itk-radius-sm); border: 1px solid var(--itk-border); }
.itk-swatch { flex-direction: column; align-items: center; justify-content: flex-end; }
.itk-swatch__meta { font-weight: 500; opacity: .85; font-size: .66rem; font-variant-numeric: tabular-nums; }

/* live diff viewer (image compare / diff tools) */
.itk-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--itk-space-3); margin-bottom: var(--itk-space-2); }
.itk-diff-panel { border: 1px solid var(--itk-border); border-radius: var(--itk-radius); overflow: hidden; background: repeating-conic-gradient(#d8d8d8 0 25%, #eee 0 50%) 0 0/16px 16px; }
.itk-diff-panel--result { grid-column: 1 / -1; }
.itk-diff-panel__label {
	display: flex;
	align-items: center;
	gap: var(--itk-space-2);
	padding: var(--itk-space-2) var(--itk-space-3);
	background: var(--itk-surface-2);
	border-bottom: 1px solid var(--itk-border);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--itk-text-faint);
}
.itk-diff-panel__slot { position: relative; width: 100%; min-height: 150px; border: 0; cursor: pointer; background: transparent; }
.itk-diff-panel__slot img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.itk-diff-panel__slot--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--itk-space-2);
	color: var(--itk-text-faint);
	font-size: .85rem;
}
.itk-diff-panel__slot--empty:hover { color: var(--itk-accent); }
.itk-diff-canvas { width: 100%; max-height: 480px; border-radius: var(--itk-radius); border: 1px solid var(--itk-border); background: #000; }
.itk-diff-empty { display: flex; align-items: center; justify-content: center; gap: var(--itk-space-2); color: var(--itk-text-faint); font-size: .9rem; min-height: 120px; }
.itk-diff-tools { display: flex; flex-wrap: wrap; gap: var(--itk-space-3); align-items: center; }
.itk-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }

/* alt-text keywords */
.itk-kws { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--itk-space-3); }
.itk-kw { background: color-mix(in srgb, var(--itk-accent) 12%, transparent); color: var(--itk-accent); border: 1px solid color-mix(in srgb, var(--itk-accent) 30%, transparent); border-radius: 999px; padding: 2px 10px; font-size: .75rem; }
.itk-alt-count { display: block; margin-top: 4px; }

/* tools grid category-switch loading state */
.itk-grid--loading { position: relative; min-height: 160px; }
.itk-grid--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--itk-accent) 8%, transparent), transparent);
	background-size: 200% 100%;
	animation: itk-shimmer 1.2s infinite;
}

@keyframes itk-blink { from { opacity: .3; } to { opacity: 1; } }
@keyframes itk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* misc */
.itk-hidden { display: none !important; }
.itk-muted { color: var(--itk-text-faint); }
.itk-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* small screens */
@media (max-width: 720px) {
	.itk-fmt-grid { grid-template-columns: 1fr; }
	.itk-fmt-arrow { display: none; }
	.itk-resize-grid,
	.itk-color-replace,
	.itk-diff-grid { grid-template-columns: 1fr; }
	.itk-compare-stage { height: 260px; }
}