/* Something Web Tools Kit v1.1.0 — Frontend design system (light, premium, AdSense-safe)
   White cards, 18px radius, layered soft shadows, blue gradient accents (#2563eb → #1e3a8a),
   navy text (#0f172a). No external frameworks. Transitions ≤ 0.25s.
   NOTE: rules here are DEFAULTS. class-swt-frontend.php injects per-tool inline CSS with
   higher specificity (.swt-tool[data-swt-tool="…"] selectors), so Design-tab settings
   always override these. Keep selectors at or below that specificity — no !important
   on container / title / button / article / faq properties. */

/* ---------- Base tool wrapper ---------- */
.swt-tool {
	max-width: 640px;
	margin: 2rem auto;
	padding: 0;
	background: #ffffff;
	border: 1px solid #e8ecf3;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
	font-family: inherit;
	box-sizing: border-box;
	color: #334155;
	overflow: hidden;
}
.swt-tool *,
.swt-tool *::before,
.swt-tool *::after { box-sizing: border-box; }

/* The templates use class="swt-tool swt-card"; .swt-card carries the card look. */
.swt-card {
	background: #ffffff;
	border: 1px solid #e8ecf3;
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

/* ---------- Card band (top gradient header) ---------- */
.swt-card-band {
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 55%, #e0e7ff 100%);
	padding: 1.75rem 1.5rem 1.5rem;
	text-align: center;
	border-bottom: 1px solid #dbe6f5;
}
.swt-tool-emoji {
	font-size: 2.75rem;
	line-height: 1;
	display: block;
	margin-bottom: 0.6rem;
	filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.15));
}
.swt-tool-title {
	margin: 0 0 0.4rem;
	font-size: 1.6rem;
	line-height: 1.25;
	color: #0f172a;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.swt-tool-sub {
	margin: 0;
	color: #475569;
	font-size: 0.95rem;
	line-height: 1.55;
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Card body ---------- */
.swt-card-body { padding: 1.75rem; }

/* ---------- Steps (numbered flow with connecting line) ---------- */
.swt-steps {
	display: flex;
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.swt-step {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 0.4rem;
}
.swt-step::before {
	content: "";
	position: absolute;
	top: 17px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e2e8f0;
	z-index: 0;
}
.swt-step:first-child::before { display: none; }
.swt-step-num {
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #2563eb, #1e3a8a);
	color: #ffffff;
	font-weight: 800;
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
	margin-bottom: 0.5rem;
}
.swt-step-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: #475569;
	line-height: 1.4;
}

/* ---------- Disclaimer ---------- */
.swt-disclaimer {
	text-align: center;
	font-size: 0.8rem;
	color: #94a3b8;
	margin: 1.25rem 0 0;
	line-height: 1.5;
}

/* ================= Buttons ================= */
.swt-btn {
	display: block;
	width: 100%;
	padding: 0.9rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, #2563eb, #1e3a8a);
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
	margin-top: 0.5rem;
	font-family: inherit;
	line-height: 1.4;
}
.swt-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}
.swt-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); }
.swt-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Loading state: pointer-events none + spinner shown */
.swt-btn[data-loading] {
	opacity: 0.75;
	cursor: progress;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/* Ghost / secondary button */
.swt-btn-ghost {
	background: #ffffff;
	color: #2563eb;
	border: 2px solid #bfdbfe;
	width: auto;
	margin: 1rem auto 0;
	padding: 0.6rem 1.5rem;
	font-size: 0.95rem;
	box-shadow: none;
}
.swt-btn-ghost:hover {
	border-color: #2563eb;
	background: #eff6ff;
	filter: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.18);
}

/* Small inline button variant */
.swt-btn-small {
	width: auto;
	display: inline-block;
	padding: 0.5rem 1.1rem;
	font-size: 0.9rem;
	margin-top: 0;
}

/* CSS-only spinner (16px, hidden unless .swt-btn[data-loading] or .is-visible) */
.swt-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	animation: swt-spin 0.7s linear infinite;
	vertical-align: -3px;
	margin-right: 0.5rem;
}
.swt-btn[data-loading] .swt-spinner { display: inline-block; }
.swt-spinner.is-visible { display: inline-block; }
.swt-spinner.on-light {
	border-color: rgba(37, 99, 235, 0.2);
	border-top-color: #2563eb;
}
@keyframes swt-spin { to { transform: rotate(360deg); } }

/* Copy button + transient copied state */
.swt-copybtn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	font-size: 0.88rem;
	font-weight: 700;
	font-family: inherit;
	color: #2563eb;
	background: #eff6ff;
	border: 1.5px solid #bfdbfe;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
	white-space: nowrap;
}
.swt-copybtn:hover { background: #dbeafe; border-color: #93c5fd; transform: translateY(-1px); }
.swt-copybtn:active { transform: translateY(0); }
.swt-copybtn.is-copied {
	background: #f0fdf4;
	border-color: #86efac;
	color: #15803d;
}

/* ================= Forms ================= */
.swt-form-row {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	margin-bottom: 1.25rem;
}
.swt-field { flex: 1; min-width: 0; margin-bottom: 1.25rem; }
.swt-form-row .swt-field { margin-bottom: 0; }
.swt-field > label,
.swt-field-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.45rem;
	font-size: 0.88rem;
	color: #0f172a;
}

.swt-input,
.swt-textarea,
.swt-select {
	width: 100%;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	color: #0f172a;
	border: 2px solid #e0e0e0;
	border-radius: 12px;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: #ffffff;
	font-family: inherit;
	line-height: 1.5;
}
.swt-input::placeholder,
.swt-textarea::placeholder { color: #9ca3af; }
.swt-input:focus,
.swt-textarea:focus,
.swt-select:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
	background: #ffffff;
}
.swt-textarea { resize: vertical; min-height: 120px; }
.swt-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* Checkbox row */
.swt-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: #334155;
	cursor: pointer;
	line-height: 1.4;
}
.swt-check input {
	width: 18px;
	height: 18px;
	accent-color: #2563eb;
	flex-shrink: 0;
	cursor: pointer;
}

/* ---------- Styled range slider ---------- */
.swt-range {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.swt-range input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	min-width: 0;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(to right, #2563eb var(--swt-range-pct, 50%), #e2e8f0 var(--swt-range-pct, 50%));
	outline: none;
	cursor: pointer;
}
.swt-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #2563eb;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
	transition: transform 0.15s;
}
.swt-range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.swt-range input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #2563eb;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}
.swt-range input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: #e2e8f0;
}
.swt-range-val {
	font-weight: 800;
	color: #0f172a;
	min-width: 58px;
	text-align: right;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Hint text ---------- */
.swt-hint {
	font-size: 0.8rem;
	color: #94a3b8;
	margin: 0.35rem 0 0;
	line-height: 1.5;
}

/* ---------- Preset chips ---------- */
.swt-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}
.swt-preset {
	padding: 0.45rem 0.95rem;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: inherit;
	color: #475569;
	background: #f1f5f9;
	border: 1.5px solid #e2e8f0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.swt-preset:hover { border-color: #93c5fd; color: #2563eb; transform: translateY(-1px); }
.swt-preset.is-active {
	background: linear-gradient(135deg, #2563eb, #1e3a8a);
	border-color: #2563eb;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ---------- Color picker row ---------- */
.swt-color-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.25rem;
}
.swt-color-field {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: #334155;
}
.swt-color-field input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	width: 44px;
	height: 34px;
	padding: 0;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.2s;
}
.swt-color-field input[type="color"]:hover,
.swt-color-field input[type="color"]:focus { border-color: #2563eb; outline: none; }
.swt-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.swt-color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.swt-color-field input[type="color"]::-moz-color-swatch { border: none; border-radius: 5px; }

/* ================= Dropzone ================= */
.swt-dropzone {
	border: 2px dashed #cbd5e1;
	border-radius: 14px;
	padding: 2.25rem 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
	background: #fbfcfe;
	color: #475569;
}
.swt-dropzone:hover { border-color: #93c5fd; background: #f5f9ff; }
/* JS convention is .swt-dragover; .svt-dragover also supported (legacy spelling). */
.swt-dropzone.swt-dragover,
.swt-dropzone.svt-dragover {
	border-color: #2563eb;
	background: #eff6ff;
	transform: scale(1.015);
	box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}
.swt-dropzone-text {
	font-weight: 700;
	color: #0f172a;
	margin: 0.6rem 0 0;
	font-size: 1rem;
}
.swt-dropzone-hint {
	display: block;
	font-weight: 400;
	font-size: 0.82rem;
	color: #94a3b8;
	margin-top: 0.35rem;
}
.swt-file-input {
	/* Visually hidden but still focusable/clickable via its label. */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.swt-preview { margin-top: 1.25rem; text-align: center; }
.swt-preview img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid #e8ecf3;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

/* ================= Results ================= */
.swt-result {
	margin-top: 1.5rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 1.25rem 1.5rem;
	color: #334155;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.swt-result-title {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	color: #0f172a;
	font-weight: 800;
}
.swt-result-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed #e2e8f0;
	font-size: 0.95rem;
}
.swt-result-row:last-child { border-bottom: none; }

/* Stat grid (word counter, reading time, etc.) */
.swt-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.swt-stat {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.1rem 0.75rem;
	text-align: center;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.swt-stat-num {
	font-size: 1.9rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.swt-stat-label {
	font-size: 0.8rem;
	color: #64748b;
	margin-top: 0.35rem;
	font-weight: 600;
}

/* Friendly empty state */
.swt-empty {
	text-align: center;
	padding: 2.5rem 1.5rem;
	color: #94a3b8;
}
.swt-empty .swt-empty-emoji {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.75rem;
}
.swt-empty p { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* Error box — hidden when [hidden] is present */
.swt-error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	margin: 1rem 0;
	font-size: 0.92rem;
	color: #991b1b;
	line-height: 1.5;
}
.swt-error[hidden] { display: none !important; }

/* Success notice */
.swt-success {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	margin: 1rem 0;
	font-size: 0.92rem;
	color: #166534;
	line-height: 1.5;
}

/* Disabled-tool notice (rendered by class-swt-tools.php) */
.swt-disabled-notice {
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 12px;
	padding: 1.25rem 1rem;
	text-align: center;
	color: #92400e;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 2rem auto;
	max-width: 640px;
}

/* ================= Per-tool extras ================= */

/* --- File queue (image compressor) --- */
.swt-queue { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.swt-queue-row {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 0.7rem 0.85rem;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.swt-queue-thumb {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: #64748b;
}
.swt-queue-name {
	font-weight: 700;
	font-size: 0.9rem;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.swt-queue-meta {
	font-size: 0.78rem;
	color: #94a3b8;
	margin-top: 0.15rem;
}
.swt-queue-body { flex: 1; min-width: 0; }
.swt-queue-actions {
	display: flex;
	gap: 0.4rem;
	flex-shrink: 0;
}
.swt-queue-actions button {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #64748b;
	font-size: 0.9rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
	font-family: inherit;
	line-height: 1;
}
.swt-queue-actions button:hover { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

/* --- Before/after compare slider (image resizer) --- */
.swt-compare {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	background: #f1f5f9;
	line-height: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
.swt-compare img,
.swt-compare-before {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}
.swt-compare-after {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	width: 50%; /* JS updates this while dragging */
	border-right: 3px solid #ffffff;
	box-shadow: 4px 0 12px rgba(15, 23, 42, 0.25);
}
.swt-compare-after img {
	width: auto;
	max-width: none;
	height: 100%;
}
.swt-compare-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%; /* JS updates this while dragging */
	width: 0;
	z-index: 2;
	cursor: ew-resize;
	line-height: 1;
}
.swt-compare-handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1.5px;
	width: 3px;
	background: #ffffff;
	box-shadow: 0 0 10px rgba(15, 23, 42, 0.4);
}
.swt-compare-grip {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #2563eb;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -2px;
}

/* --- Keyword frequency table (word counter) --- */
.swt-kw-table { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.75rem; }
.swt-kw-row {
	display: grid;
	grid-template-columns: minmax(90px, 1fr) 2fr auto;
	gap: 0.75rem;
	align-items: center;
}
.swt-kw-word {
	font-size: 0.88rem;
	font-weight: 600;
	color: #334155;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.swt-kw-bar {
	height: 10px;
	background: #eef2f7;
	border-radius: 999px;
	overflow: hidden;
}
.swt-kw-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb, #1e3a8a);
	width: 0; /* JS sets width via inline style */
	transition: width 0.25s ease;
}
.swt-kw-count {
	font-size: 0.85rem;
	font-weight: 800;
	color: #0f172a;
	min-width: 30px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* --- Two-column duo panels (discount, percentage, etc.) --- */
.swt-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.swt-duo-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 1.1rem;
	text-align: center;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.swt-duo-label {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
	margin-bottom: 0.4rem;
}
.swt-duo-value {
	font-size: 1.5rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

/* --- Proportion bar (reading time, etc.) --- */
.swt-propbar {
	height: 12px;
	background: #eef2f7;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 0.6rem;
}
.swt-propbar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #2563eb, #1e3a8a);
	width: 0; /* JS sets width via inline style */
	transition: width 0.25s ease;
}

/* --- Code block (JSON formatter) — LIGHT, never dark --- */
.swt-code {
	display: flex;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.88rem;
	line-height: 1.65;
	color: #0f172a;
	max-height: 420px;
	overflow: hidden;
	margin: 1rem 0 0;
}
.swt-code-lines {
	flex-shrink: 0;
	padding: 1rem 0.7rem 1rem 1rem;
	text-align: right;
	color: #9ca3af;
	border-right: 1px solid #e2e8f0;
	background: #f1f5f9;
	user-select: none;
	-webkit-user-select: none;
	overflow: hidden;
	line-height: 1.65;
}
.swt-code-body {
	flex: 1;
	min-width: 0;
	overflow: auto;
	padding: 1rem 1.25rem;
	margin: 0;
	white-space: pre;
}
/* Token colors for highlighted JSON */
.tok-key   { color: #7c3aed; }
.tok-str   { color: #047857; }
.tok-num   { color: #b45309; }
.tok-bool  { color: #2563eb; }
.tok-null  { color: #6b7280; }
.tok-punct { color: #374151; }

/* Prominent code error box */
.swt-code-error {
	background: #fef2f2;
	border: 2px solid #fca5a5;
	border-left: 6px solid #dc2626;
	border-radius: 10px;
	padding: 1rem 1.25rem;
	margin: 1rem 0 0;
	color: #991b1b;
	font-size: 0.92rem;
	line-height: 1.6;
	font-weight: 600;
}
.swt-code-error small { display: block; font-weight: 400; margin-top: 0.35rem; color: #b91c1c; }

/* --- QR preview (checkerboard-safe) --- */
.swt-qr-wrap { text-align: center; }
.swt-qr-preview {
	display: inline-block;
	background: #ffffff; /* solid white so the code always scans */
	padding: 1.25rem;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	line-height: 0;
}
.swt-qr-preview img,
.swt-qr-preview canvas {
	display: block;
	width: 200px;
	height: 200px;
	max-width: 100%;
}

/* --- Mode tabs (e.g. resize by pixels vs. percentage) --- */
.swt-mode-tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	background: #f1f5f9;
	padding: 0.35rem;
	border-radius: 12px;
}
.swt-mode-tab {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0.6rem 0.5rem;
	border-radius: 9px;
	font-size: 0.92rem;
	font-weight: 600;
	color: #64748b;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s, color 0.2s;
}
.swt-mode-tab:hover { color: #0f172a; }
.swt-mode-tab.active {
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.swt-mode-panel { display: none; }
.swt-mode-panel.active { display: block; }

/* --- Toolbar row (copy / download buttons above output) --- */
.swt-toolbar {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 0.75rem 0 0;
	align-items: center;
}

/* --- Copy row (UTM builder output, etc.) --- */
.swt-copy-row {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
	margin-top: 1rem;
}
.swt-copy-row .swt-input { flex: 1; min-width: 0; }

/* --- Ad slots --- */
.swt-ad { margin: 1.5rem auto; text-align: center; max-width: 100%; overflow: hidden; }

/* ================= SEO article below the tool ================= */
.swt-article {
	margin: 2rem auto;
	line-height: 1.75;
	color: #334155;
	max-width: 720px;
}
.swt-article h1,
.swt-article h2,
.swt-article h3 {
	color: #0f172a;
	line-height: 1.3;
	margin-top: 1.6rem;
	margin-bottom: 0.6rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.swt-article h1 { font-size: 1.7rem; }
.swt-article h2 { font-size: 1.4rem; }
.swt-article h3 { font-size: 1.15rem; }
.swt-article p { margin: 0 0 1rem; }
.swt-article ul,
.swt-article ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.swt-article li { margin-bottom: 0.4rem; }
.swt-article strong { color: #0f172a; }
.swt-article a { color: #2563eb; text-decoration: underline; }
.swt-article a:hover { text-decoration: none; }
.swt-article img { max-width: 100%; height: auto; border-radius: 12px; }

/* ================= FAQ accordion =================
   Behavior is driven by frontend.js (toggles .open, animates via max-height).
   Do NOT remove .swt-faq-item/.swt-faq-q/.swt-faq-a/.swt-faq-icon or the
   [data-swt-faqs] container hook. */
.swt-faqs { margin: 2.5rem auto; max-width: 720px; }
.swt-faqs-title {
	text-align: center;
	font-size: 1.4rem;
	color: #0f172a;
	font-weight: 800;
	margin: 0 0 1.25rem;
	letter-spacing: -0.01em;
}
.swt-faq-item {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	margin-bottom: 0.6rem;
	overflow: hidden;
	transition: box-shadow 0.25s, border-color 0.25s;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.swt-faq-item:hover { border-color: #bfdbfe; }
.swt-faq-item.open {
	border-color: #bfdbfe;
	box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}
.swt-faq-q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	color: #0f172a;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.swt-faq-q:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.swt-faq-q-text { flex: 1; min-width: 0; }
.swt-faq-icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #eff6ff;
	color: #2563eb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.25s, background 0.25s, color 0.25s;
}
.swt-faq-item.open .swt-faq-icon {
	transform: rotate(135deg);
	background: linear-gradient(135deg, #2563eb, #1e3a8a);
	color: #ffffff;
}
/* Expand / collapse animation is driven by frontend.js via inline max-height. */
.swt-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.swt-faq-a-inner {
	padding: 0 1.25rem 1.25rem;
	color: #475569;
	line-height: 1.7;
}
.swt-faq-a-inner p:first-child { margin-top: 0; }
.swt-faq-a-inner p:last-child { margin-bottom: 0; }

/* ================= Responsive (stack under ~640px) ================= */
@media (max-width: 640px) {
	.swt-tool { margin: 1rem auto; border-radius: 16px; }
	.swt-card-band { padding: 1.4rem 1.1rem 1.2rem; }
	.swt-card-body { padding: 1.25rem; }
	.swt-tool-title { font-size: 1.35rem; }
	.swt-form-row { flex-direction: column; align-items: stretch; }
	.swt-stat-grid { grid-template-columns: 1fr 1fr; }
	.swt-copy-row { flex-direction: column; }
	.swt-mode-tabs { flex-wrap: wrap; }
	.swt-code { font-size: 0.8rem; }
	.swt-duo { grid-template-columns: 1fr; }
	.swt-kw-row { grid-template-columns: minmax(70px, 1fr) 1.4fr auto; }
	/* Steps: vertical flow with vertical connector */
	.swt-steps { flex-direction: column; gap: 1rem; align-items: stretch; }
	.swt-step { flex-direction: row; text-align: left; padding: 0; gap: 0.85rem; }
	.swt-step::before {
		top: auto;
		left: 17px;
		bottom: -1rem;
		width: 2px;
		height: 1rem;
	}
	.swt-step:last-child::before { display: none; }
	.swt-step-num { margin-bottom: 0; flex-shrink: 0; }
}