.img-workspace { margin-bottom: 16px; }
.img-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	margin-bottom: 12px;
}
.img-toolbar label:not(.btn):not(.img-file-btn) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #424242;
	white-space: nowrap;
}
.img-toolbar .btn {
	display: inline-block;
	min-height: 36px;
	line-height: 36px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #1e88e5;
	background-image: linear-gradient(#2196f3, #1e88e5);
	border: 2px solid #1976d2;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	transition: background .2s, border-color .2s, box-shadow .2s;
}
.img-toolbar .btn:hover {
	background: #1976d2;
	background-image: linear-gradient(#1e88e5, #1976d2);
	border-color: #1565c0;
	box-shadow: 0 2px 6px rgba(25, 118, 210, .25);
}
.img-toolbar .btn-secondary {
	background: #fafafa;
	color: #424242;
	font-weight: 600;
	background-image: linear-gradient(#fafafa, #f5f5f5);
	border-color: #bdbdbd;
}
.img-toolbar .btn-secondary:hover {
	background: #eee;
	color: #1565c0;
	border-color: #1976d2;
}
.img-toolbar label.img-file-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	line-height: 1.2;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #1e88e5;
	background-image: linear-gradient(#2196f3, #1e88e5);
	border: 2px solid #1976d2;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(25, 118, 210, .3);
	transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
}
.img-toolbar label.img-file-btn::before {
	content: "📁";
	font-size: 16px;
	line-height: 1;
}
.img-toolbar label.img-file-btn:hover {
	background: #1976d2;
	background-image: linear-gradient(#1e88e5, #1976d2);
	border-color: #1565c0;
	box-shadow: 0 3px 10px rgba(25, 118, 210, .35);
	transform: translateY(-1px);
}
.img-toolbar label.img-file-btn input[type="file"] {
	display: none;
}
.img-toolbar input[type="number"],
.img-toolbar input[type="text"],
.img-toolbar select {
	padding: 6px 10px;
	border: 2px solid #1976d2;
	border-radius: 4px;
	font-size: 14px;
	min-height: 36px;
	box-sizing: border-box;
	background: #fff;
	color: #424242;
}

.img-toolbar input[type="number"] {
	min-width: 110px;
	width: 110px;
}

.img-toolbar input[type="text"] {
	min-width: 100px;
}

.img-toolbar select {
	min-width: 100px;
	padding-right: 28px;
}
.img-toolbar input[type="range"] { width: 120px; }
.img-toolbar input[type="color"] {
	width: 40px;
	height: 32px;
	padding: 2px;
	border: 2px solid #1976d2;
	border-radius: 4px;
	cursor: pointer;
}
.img-dim-info {
	text-align: center;
	font-size: 14px;
	color: #1565c0;
	font-weight: 600;
	margin: 0 0 12px;
	padding: 8px 14px;
	background: #e3f2fd;
	border: 1px solid #90caf9;
	border-radius: 4px;
}
	text-align: center;
	margin: 12px 0 16px;
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 12px;
	min-height: 120px;
}
.img-preview-wrap canvas,
.img-preview-wrap img {
	max-width: 100%;
	max-height: 480px;
	border: 2px solid #1976d2;
	border-radius: 4px;
	vertical-align: middle;
}
.img-preview-wrap.img-crop-host { position: relative; display: inline-block; cursor: crosshair; }
.img-crop-box {
	position: absolute;
	border: 2px dashed #f44336;
	background: rgba(244,67,54,.12);
	pointer-events: none;
}
.img-info-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin-top: 8px;
}
.img-info-table th,
.img-info-table td {
	border: 1px solid #e0e0e0;
	padding: 8px 12px;
	text-align: left;
}
.img-info-table th { background: #e3f2fd; color: #1565c0; width: 140px; }
.img-result-list { list-style: none; padding: 0; margin: 12px 0 0; }
.img-result-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}
.img-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.img-color-swatch {
	width: 80px;
	text-align: center;
	font-size: 12px;
}
.img-color-swatch div {
	height: 48px;
	border-radius: 4px;
	border: 1px solid #ccc;
	margin-bottom: 4px;
}
.img-note {
	background: #fffde7;
	border: 1px solid #fff176;
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
	color: #616161;
}
.svg-preview-box {
	border: 2px solid #1976d2;
	border-radius: 4px;
	padding: 16px;
	min-height: 200px;
	background: #fff;
	text-align: center;
	overflow: auto;
}
.svg-preview-box svg { max-width: 100%; max-height: 400px; }
.hidden-canvas { display: none; }