/* Meratool Tools: styles for [meratool_tool]. Uses the theme's colour tokens when present. */
.mt-tool {
	--mt-primary: var(--wp--preset--color--primary, #5b3df5);
	--mt-primary-dark: var(--wp--preset--color--primary-dark, #3b21c4);
	--mt-soft: var(--wp--preset--color--primary-soft, #ede9fe);
	--mt-surface: var(--wp--preset--color--surface, #f6f4ff);
	--mt-border: var(--wp--preset--color--border, #e4e1f5);
	--mt-ink: var(--wp--preset--color--contrast, #0b1020);
	--mt-muted: var(--wp--preset--color--muted, #475569);
	--mt-bad: #b91c1c;
	max-width: 100%; box-sizing: border-box; color: var(--mt-ink);
	background: #fff; border: 1px solid var(--mt-border); border-radius: 18px; padding: clamp(1rem, 3vw, 1.75rem);
}
.mt-tool *, .mt-tool *::before, .mt-tool *::after { box-sizing: border-box; }
.mt-tool > * + * { margin-block-start: 1rem; }
.mt-card { background: var(--mt-surface); border: 1px solid var(--mt-border); border-radius: 14px; padding: 1rem 1.1rem; }
.mt-card + .mt-card { margin-block-start: 1rem; }
.mt-subtitle { font-size: 1.1rem; margin: 0 0 0.75rem; }
.mt-note { margin: 0; color: var(--mt-muted); font-size: 0.9rem; }
.mt-loading { margin: 0; color: var(--mt-muted); }
.mt-error { margin: 0; padding: 0.6rem 0.85rem; border-radius: 10px; background: #fef2f2; color: var(--mt-bad); font-size: 0.92rem; }
.mt-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.85rem 1rem; align-items: end; }
.mt-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.mt-field--check { flex-direction: row; align-items: center; gap: 0.5rem; padding-block: 0.5rem; }
.mt-label { font-size: 0.85rem; font-weight: 500; color: var(--mt-muted); }
.mt-field--check .mt-label { color: var(--mt-ink); font-weight: 400; }
.mt-tool :where(input[type="text"], input[type="number"], input[type="date"], select, textarea) {
	width: 100%; font: inherit; font-size: 1rem; color: var(--mt-ink); background: #fff;
	border: 1px solid #c9c5e6; border-radius: 10px; padding: 0.6rem 0.75rem; min-height: 2.75rem;
}
.mt-tool input[type="color"] { width: 100%; height: 2.75rem; border: 1px solid #c9c5e6; border-radius: 10px; padding: 0.2rem; background: #fff; }
.mt-tool input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--mt-primary); }
.mt-tool :where(input, select, textarea, button, a):focus-visible { outline: 3px solid var(--mt-primary); outline-offset: 2px; }
.mt-textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; line-height: 1.5; }
.mt-out { background: var(--mt-surface) !important; }
.mt-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mt-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1.25rem; border-radius: 999px; border: 2px solid var(--mt-primary);
	background: var(--mt-primary); color: #fff; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer;
}
.mt-btn:hover { background: var(--mt-primary-dark); border-color: var(--mt-primary-dark); }
.mt-btn--ghost { background: #fff; color: var(--mt-primary); }
.mt-btn--ghost:hover { background: var(--mt-soft); color: var(--mt-primary-dark); border-color: var(--mt-primary); }
.mt-results { display: grid; gap: 0.5rem; margin: 0; }
.mt-results:empty { display: none; }
.mt-result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.65rem 0.9rem; background: var(--mt-surface); border-radius: 10px; }
.mt-result dt { color: var(--mt-muted); font-size: 0.92rem; }
.mt-result dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; text-align: right; }
.mt-big { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 700; text-align: center; margin: 0.5rem 0; }
.mt-preview { min-height: 7.5rem; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 600; border: 1px solid var(--mt-border); background: #fff; }
.mt-preview:empty { min-height: 9rem; }
.mt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.mt-diff { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; border: 1px solid var(--mt-border); border-radius: 10px; overflow-x: auto; max-height: 28rem; overflow-y: auto; }
.mt-diff:empty { display: none; }
.mt-diff > div { white-space: pre-wrap; padding: 0.1rem 0.75rem; overflow-wrap: anywhere; }
.mt-diff__add { background: #dcfce7; color: #14532d; }
.mt-diff__del { background: #fee2e2; color: #7f1d1d; }
.mt-drop { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 2rem 1rem; text-align: center; border: 2px dashed #b9b2ec; border-radius: 16px; background: var(--mt-surface); cursor: pointer; }
.mt-drop:hover, .mt-drop.is-over { background: var(--mt-soft); border-color: var(--mt-primary); }
.mt-drop__big { font-weight: 600; font-size: 1.1rem; color: var(--mt-primary-dark); }
.mt-drop__sub { color: var(--mt-muted); font-size: 0.9rem; }
.mt-drop input { max-width: 100%; margin-top: 0.6rem; }
.mt-files { display: grid; gap: 0.75rem; }
.mt-files:empty { display: none; }
.mt-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.75rem; border: 1px solid var(--mt-border); border-radius: 12px; }
.mt-file__meta { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mt-file__meta strong { overflow-wrap: anywhere; }
.mt-file__thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.mt-tool > .mt-file__thumb { width: auto; max-width: 100%; max-height: 16rem; height: auto; object-fit: contain; }
.mt-canvas { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--mt-border); cursor: crosshair; }
.mt-swatch { height: 3.5rem; border-radius: 12px; border: 1px solid var(--mt-border); }
@media (prefers-reduced-motion: reduce) { .mt-tool * { transition: none !important; } }