/* ProFont QR Tools - uses the theme's variables (--ink, --ink-soft, --accent, --rule, --card-bg) and its .pf-card-meta / .font-cta-button classes. */
.profont-qr-tools {
	max-width: 820px;
	margin: 0 auto;
	color: var(--ink, #181C2E);
}
.profont-qr-tools *,
.profont-qr-tools *::before,
.profont-qr-tools *::after {
	box-sizing: border-box;
}
.pqr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	grid-template-areas: "content preview" "style style";
	column-gap: 20px;
	align-items: start;
}
.pqr-layout > * {
	min-width: 0;
}
.pqr-area-content { grid-area: content; }
.pqr-area-style { grid-area: style; }
.pqr-area-preview {
	grid-area: preview;
}
.pqr-h2 {
	font-family: 'Fraunces', serif;
	font-size: 20px;
	margin: 0 0 16px;
	color: var(--ink, #181C2E);
}
@media (max-width: 900px) {
	.pqr-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "content" "preview" "style";
	}
}
.pqr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}
.profont-qr-tools .pqr-tab,
.profont-qr-tools .pqr-tab:hover,
.profont-qr-tools .pqr-tab:focus {
	background: var(--card-bg, #fff);
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 3px;
	padding: 9px 16px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ink, #181C2E);
	cursor: pointer;
}
.profont-qr-tools .pqr-tab[aria-pressed="true"],
.profont-qr-tools .pqr-tab[aria-pressed="true"]:hover,
.profont-qr-tools .pqr-tab[aria-pressed="true"]:focus {
	background: var(--accent, #1B2140);
	border-color: var(--accent, #1B2140);
	color: #fff;
}
.pqr-card {
	background: var(--card-bg, #fff);
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}
.pqr-field {
	margin-bottom: 14px;
	min-width: 0;
}
.pqr-field label,
.pqr-field .pf-card-meta {
	display: block;
	margin-bottom: 6px;
}
.pqr-field input[type="text"],
.pqr-field input[type="search"],
.pqr-field input[type="password"],
.pqr-field textarea,
.pqr-field select {
	width: 100%;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--ink, #181C2E);
	background: #fff;
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 6px;
}
.pqr-field textarea {
	min-height: 84px;
	resize: vertical;
}
.pqr-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}
.pqr-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}
.pqr-detected {
	font-size: 14px;
	color: var(--ink-soft, #6D7290);
	margin: 8px 0 0;
}
.profont-qr-tools .pqr-link,
.profont-qr-tools .pqr-link:hover,
.profont-qr-tools .pqr-link:focus {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--accent, #1B2140);
	text-decoration: underline;
	cursor: pointer;
}
.pqr-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 14px;
}
.pqr-options input[type="color"] {
	width: 100%;
	height: 44px;
	padding: 2px;
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}
.pqr-hint {
	font-size: 13px;
	color: var(--ink-soft, #6D7290);
	margin: 6px 0 0;
}
.pqr-preview {
	text-align: center;
}
.pqr-stage {
	display: inline-block;
	max-width: 100%;
	padding: 16px;
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 6px;
}
.pqr-stage canvas {
	display: block;
	max-width: 100%;
	height: auto !important;
	width: 100%;
	max-height: 360px;
	object-fit: contain;
}
.pqr-stage-box {
	width: min(360px, 100%);
}
.pqr-caption {
	margin: 10px 0 0;
	line-height: 1.2;
	word-break: break-word;
}
.pqr-empty {
	color: var(--ink-soft, #6D7290);
	padding: 60px 20px;
}
.pqr-issues {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	text-align: left;
}
.pqr-issues li {
	font-size: 14px;
	padding: 8px 12px;
	border-radius: 4px;
	margin-bottom: 6px;
	border: 1px solid var(--rule, #DFE1EF);
	background: #fff;
}
.pqr-issues li[data-level="error"] {
	border-color: #b3261e;
	color: #7a1913;
}
.pqr-issues li[data-level="info"] {
	color: var(--ink-soft, #6D7290);
}
.pqr-issues li[data-level="warn"] {
	border-color: #b36b00;
	color: #6b4100;
}
.pqr-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}
.pqr-actions .font-cta-button {
	border: 0;
	cursor: pointer;
	padding: 13px 24px;
	font-size: 13px;
}
.pqr-actions .font-cta-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.pqr-status {
	min-height: 20px;
	font-size: 14px;
	color: var(--ink-soft, #6D7290);
	margin: 10px 0 0;
}
.pqr-fontlist {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	border: 1px solid var(--rule, #DFE1EF);
	border-radius: 6px;
	background: #fff;
}
.pqr-fontlist:empty {
	display: none;
}
.profont-qr-tools .pqr-fontlist button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 14px;
	background: none;
	color: var(--ink, #181C2E);
	border: 0;
	font: inherit;
	cursor: pointer;
}
.profont-qr-tools .pqr-fontlist button:hover,
.profont-qr-tools .pqr-fontlist button:focus {
	background: #F5F6FA;
	color: var(--ink, #181C2E);
}
.pqr-footer {
	font-size: 13px;
	color: var(--ink-soft, #6D7290);
	text-align: center;
	margin-top: 24px;
}
.pqr-footer p {
	margin: 0 0 6px;
}
@media (max-width: 560px) {
	.pqr-row,
	.pqr-options {
		grid-template-columns: 1fr;
	}
}
