/* Tools10X — Image Tools (Batch 01) — namespaced styles.
   All selectors are prefixed with tools10x- to avoid theme conflicts. */

.tools10x-wrap {
	--t10x-radius: 14px;
	--t10x-gap: 16px;
	--t10x-accent: #5b5bf6;
	--t10x-accent-dark: #4646d1;
	--t10x-bg: #ffffff;
	--t10x-bg-soft: #f6f7fb;
	--t10x-text: #1c1e26;
	--t10x-text-muted: #5c6072;
	--t10x-border: #e4e6ef;
	--t10x-success: #1e9e63;
	--t10x-error: #d0392b;
	max-width: 900px;
	margin: 0 auto;
	color: var(--t10x-text);
	font-size: 16px;
	line-height: 1.65;
}

.tools10x-wrap[data-theme="dark"],
.tools10x-wrap.tools10x-theme-dark {
	--t10x-bg: #16171d;
	--t10x-bg-soft: #1f212b;
	--t10x-text: #eef0f6;
	--t10x-text-muted: #a6aabb;
	--t10x-border: #2c2f3b;
}

@media ( prefers-color-scheme: dark ) {
	.tools10x-wrap[data-theme="auto"] {
		--t10x-bg: #16171d;
		--t10x-bg-soft: #1f212b;
		--t10x-text: #eef0f6;
		--t10x-text-muted: #a6aabb;
		--t10x-border: #2c2f3b;
	}
}

.tools10x-wrap * { box-sizing: border-box; }

.tools10x-h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); font-weight: 800; margin: 0 0 12px; line-height: 1.25; }
.tools10x-intro { color: var(--t10x-text-muted); font-size: 1.05rem; margin: 0 0 28px; }

/* ---------- App shell ---------- */
.tools10x-app { margin-bottom: 8px; }
.tools10x-app-inner {
	background: var(--t10x-bg-soft);
	border: 1px solid var(--t10x-border);
	border-radius: var(--t10x-radius);
	padding: clamp(16px, 3vw, 28px);
}
.tools10x-loading-placeholder { display: flex; align-items: center; gap: 10px; color: var(--t10x-text-muted); padding: 30px 0; justify-content: center; }
.tools10x-spinner { width: 18px; height: 18px; border: 2px solid var(--t10x-border); border-top-color: var(--t10x-accent); border-radius: 50%; animation: tools10x-spin 0.8s linear infinite; }
@keyframes tools10x-spin { to { transform: rotate(360deg); } }

/* ---------- Dropzone ---------- */
.tools10x-dropzone {
	border: 2px dashed var(--t10x-border);
	border-radius: var(--t10x-radius);
	padding: clamp(24px, 5vw, 48px) 20px;
	text-align: center;
	cursor: pointer;
	background: var(--t10x-bg);
	transition: border-color .15s ease, background .15s ease;
}
.tools10x-dropzone:hover,
.tools10x-dropzone.tools10x-dragover { border-color: var(--t10x-accent); background: color-mix(in srgb, var(--t10x-accent) 6%, var(--t10x-bg)); }
.tools10x-dropzone input[type="file"] { display: none; }
.tools10x-dropzone-icon { font-size: 34px; display: block; margin-bottom: 8px; color: var(--t10x-accent); }
.tools10x-dropzone-text { font-weight: 600; }
.tools10x-dropzone-sub { color: var(--t10x-text-muted); font-size: .9rem; margin-top: 4px; }

/* ---------- Controls ---------- */
.tools10x-controls { display: flex; flex-wrap: wrap; gap: var(--t10x-gap); margin: 18px 0; align-items: flex-end; }
.tools10x-field { display: flex; flex-direction: column; gap: 6px; min-width: 140px; flex: 1 1 160px; }
.tools10x-field label { font-size: .82rem; font-weight: 600; color: var(--t10x-text-muted); }
.tools10x-field select,
.tools10x-field input[type="number"],
.tools10x-field input[type="text"] {
	border: 1px solid var(--t10x-border);
	border-radius: 10px;
	padding: 9px 12px;
	background: var(--t10x-bg);
	color: var(--t10x-text);
	font-size: .95rem;
	min-height: 42px;
}
.tools10x-field input[type="range"] { width: 100%; accent-color: var(--t10x-accent); min-height: 42px; }
.tools10x-checkbox-field { display: flex; align-items: center; gap: 8px; flex-direction: row; }
.tools10x-checkbox-field input { width: 18px; height: 18px; accent-color: var(--t10x-accent); }

.tools10x-btn {
	appearance: none;
	border: none;
	border-radius: 10px;
	padding: 11px 20px;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	min-height: 44px;
	background: var(--t10x-accent);
	color: #fff;
	transition: background .15s ease, transform .05s ease;
}
.tools10x-btn:hover { background: var(--t10x-accent-dark); }
.tools10x-btn:active { transform: scale(.98); }
.tools10x-btn:disabled { opacity: .5; cursor: not-allowed; }
.tools10x-btn-secondary { background: transparent; color: var(--t10x-text); border: 1px solid var(--t10x-border); }
.tools10x-btn-secondary:hover { background: var(--t10x-bg); }
.tools10x-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- Progress ---------- */
.tools10x-progress-wrap { margin: 16px 0; }
.tools10x-progress-bar { height: 8px; border-radius: 6px; background: var(--t10x-border); overflow: hidden; }
.tools10x-progress-bar-fill { height: 100%; background: var(--t10x-accent); width: 0%; transition: width .2s ease; }
.tools10x-progress-label { font-size: .82rem; color: var(--t10x-text-muted); margin-top: 6px; }

/* ---------- Results ---------- */
.tools10x-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.tools10x-result-card { background: var(--t10x-bg); border: 1px solid var(--t10x-border); border-radius: 12px; padding: 10px; text-align: center; }
.tools10x-result-card img { max-width: 100%; border-radius: 8px; display: block; margin: 0 auto 8px; background: repeating-conic-gradient(#ddd 0% 25%, #eee 0% 50%) 50%/16px 16px; }
.tools10x-result-name { font-size: .78rem; word-break: break-all; color: var(--t10x-text-muted); margin-bottom: 4px; }
.tools10x-result-size { font-size: .8rem; margin-bottom: 8px; }
.tools10x-result-size .tools10x-saved { color: var(--t10x-success); font-weight: 700; }
.tools10x-result-card .tools10x-btn { width: 100%; padding: 8px; font-size: .85rem; }

/* ---------- Messages ---------- */
.tools10x-message { border-radius: 10px; padding: 10px 14px; font-size: .88rem; margin: 12px 0; }
.tools10x-message-error { background: color-mix(in srgb, var(--t10x-error) 12%, transparent); color: var(--t10x-error); }
.tools10x-message-success { background: color-mix(in srgb, var(--t10x-success) 12%, transparent); color: var(--t10x-success); }
.tools10x-empty-state { text-align: center; color: var(--t10x-text-muted); padding: 24px 0; }

/* ---------- Crop / canvas interactive areas ---------- */
.tools10x-canvas-stage { position: relative; max-width: 100%; overflow: auto; background: repeating-conic-gradient(#ddd 0% 25%, #eee 0% 50%) 50%/16px 16px; border-radius: 10px; touch-action: none; }
.tools10x-canvas-stage canvas { display: block; max-width: 100%; height: auto; }
.tools10x-crop-box { position: absolute; border: 2px solid var(--t10x-accent); box-shadow: 0 0 0 2000px rgba(0,0,0,.35); cursor: move; touch-action: none; }
.tools10x-crop-handle { position: absolute; width: 14px; height: 14px; background: var(--t10x-accent); border: 2px solid #fff; border-radius: 50%; }

/* ---------- Article body ---------- */
.tools10x-article-body h2 { font-size: 1.35rem; font-weight: 800; margin: 34px 0 12px; }
.tools10x-article-body p { margin: 0 0 12px; }
.tools10x-list, .tools10x-steps { margin: 0 0 12px; padding-left: 22px; }
.tools10x-list li, .tools10x-steps li { margin-bottom: 6px; }
.tools10x-privacy { background: var(--t10x-bg-soft); border: 1px solid var(--t10x-border); border-radius: var(--t10x-radius); padding: 16px 20px; }

.tools10x-faq-item { border-bottom: 1px solid var(--t10x-border); }
.tools10x-faq-question {
	width: 100%; text-align: left; background: none; border: none; cursor: pointer;
	padding: 14px 4px; font-weight: 700; font-size: 1rem; color: var(--t10x-text);
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.tools10x-faq-toggle { font-size: 1.2rem; color: var(--t10x-accent); transition: transform .15s ease; }
.tools10x-faq-question[aria-expanded="true"] .tools10x-faq-toggle { transform: rotate(45deg); }
.tools10x-faq-answer { padding: 0 4px 14px; color: var(--t10x-text-muted); }

.tools10x-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.tools10x-related-card {
	display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--t10x-border);
	border-radius: 10px; text-decoration: none; color: var(--t10x-text); background: var(--t10x-bg); font-size: .9rem; font-weight: 600;
}
.tools10x-related-card:hover { border-color: var(--t10x-accent); color: var(--t10x-accent); }

.tools10x-ad-slot { min-height: 0; margin: 18px 0; }
.tools10x-ad-slot:empty { display: none; }

/* ---------- Grid / directory shortcode ---------- */
.tools10x-grid-wrap { max-width: 1100px; margin: 0 auto; }
.tools10x-grid-search-input {
	width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid #e4e6ef; font-size: 1rem; margin-bottom: 20px; min-height: 46px;
}
.tools10x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tools10x-grid-card { display: block; padding: 18px; border: 1px solid #e4e6ef; border-radius: 14px; text-decoration: none; color: #1c1e26; background: #fff; transition: transform .1s ease, border-color .1s ease; }
.tools10x-grid-card:hover { border-color: #5b5bf6; transform: translateY(-2px); }
.tools10x-grid-card-icon { font-size: 26px; color: #5b5bf6; display: block; margin-bottom: 8px; }
.tools10x-grid-card-name { display: block; font-weight: 800; margin-bottom: 4px; }
.tools10x-grid-card-desc { display: block; font-size: .85rem; color: #5c6072; }
.tools10x-grid-card.tools10x-hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.tools10x-wrap { font-size: 15px; }
	.tools10x-controls { flex-direction: column; align-items: stretch; }
	.tools10x-field { min-width: 0; }
	.tools10x-btn { width: 100%; }
	.tools10x-btn-row { flex-direction: column; }
}

/* ---------- Accessibility ---------- */
.tools10x-wrap :focus-visible { outline: 2px solid var(--t10x-accent); outline-offset: 2px; }
.tools10x-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }