/* FAQ Schema Generator — styles */

.fsg-tool {
	--fsg-bg: #ffffff;
	--fsg-fg: #1a1a1a;
	--fsg-muted: #6b7280;
	--fsg-border: #e5e7eb;
	--fsg-primary: #2563eb;
	--fsg-primary-fg: #ffffff;
	--fsg-card-bg: #f9fafb;
	--fsg-code-bg: #0f172a;
	--fsg-code-fg: #e2e8f0;
	--fsg-error: #dc2626;

	max-width: 900px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fsg-fg);
}

@media (prefers-color-scheme: dark) {
	.fsg-tool {
		--fsg-bg: #111827;
		--fsg-fg: #f3f4f6;
		--fsg-muted: #9ca3af;
		--fsg-border: #374151;
		--fsg-card-bg: #1f2937;
	}
}

.fsg-notice {
	background: rgba(217, 119, 6, 0.1);
	color: #b45309;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-size: 0.85rem;
	margin-bottom: 1.25rem;
}

@media (prefers-color-scheme: dark) {
	.fsg-notice {
		color: #fbbf24;
	}
}

.fsg-items {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.fsg-item {
	background: var(--fsg-card-bg);
	border: 1px solid var(--fsg-border);
	border-radius: 10px;
	padding: 1rem;
	width:50%;
}

.fsg-item-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}

.fsg-item-number {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--fsg-muted);
}

.fsg-remove-btn {
	background: none;
	border: none;
	color: var(--fsg-error);
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0.2rem 0.4rem;
}

.fsg-label {
	display: block;
	font-weight: 600;
	font-size: 0.82rem;
	margin: 0.6rem 0 0.3rem;
}

.fsg-input,
.fsg-textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--fsg-border);
	border-radius: 8px;
	font-size: 0.9rem;
	background: var(--fsg-bg);
	color: var(--fsg-fg);
	font-family: inherit;
}

.fsg-textarea {
	resize: vertical;
}

.fsg-input:focus-visible,
.fsg-textarea:focus-visible {
	outline: 2px solid var(--fsg-primary);
	outline-offset: 1px;
}

.fsg-btn {
	padding: 0.55rem 1rem;
	border-radius: 8px;
	border: 1px solid var(--fsg-border);
	font-size: 0.88rem;
	cursor: pointer;
	background: var(--fsg-bg);
	color: var(--fsg-fg);
}

.fsg-btn:focus-visible {
	outline: 2px solid var(--fsg-primary);
	outline-offset: 1px;
}

.fsg-btn-ghost {
	background: transparent;
}

.fsg-add-btn {
	width: 100%;
	border-style: dashed;
	margin-bottom: 1.75rem;
}

.fsg-output-tabs {
	display: flex;
	gap: 0.4rem;
	border-bottom: 1px solid var(--fsg-border);
	margin-bottom: 1rem;
	padding-bottom:10px;
}

.fsg-tab-btn {
	padding: 0.5rem 1rem;
	border: none;
	background: none;
	color: var(--fsg-muted);
	font-size: 0.88rem;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.fsg-output-tabs button{
	background:transparent !important;
}

.fsg-tab-btn.is-active {
	color: var(--fsg-primary);
	background:#0E79BF !important
}

.fsg-output-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.fsg-output-label {
	font-size: 0.8rem;
	color: #fff;
}

.fsg-actions {
	display: flex;
	gap: 0.5rem;
}

.fsg-output {
	background: var(--fsg-code-bg);
	color: var(--fsg-code-fg);
	border-radius: 8px;
	padding: 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.82rem;
	white-space: pre-wrap;
	word-break: break-word;
	min-height: 160px;
	max-height: 450px;
	overflow-y: auto;
	margin: 0;
}

@media print {
	.fsg-items,
	.fsg-add-btn,
	.fsg-actions {
		display: none !important;
	}
}