.wrap.tools {
	padding: 10px 20px 28px;
}

.pg-panel {
	box-shadow: var(--shadow);
}

.pg-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--gap);
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
}

.pg-title {
	margin: 0 0 6px;
	font-size: 16px;
}

.pg-msg {
	margin: 0;
	color: var(--muted);
}

.pg-body {
	padding: 14px;
	display: grid;
	gap: 18px;
}

.pg-row {
	display: grid;
	gap: 12px;
}

.pg-row.split {
	grid-template-columns: 1.2fr .8fr;
	gap: var(--gap);
}

@media (max-width: 980px) {
	.pg-row.split {
		grid-template-columns: 1fr;
	}
}

.out-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	align-items: center;
}

.pg-output {
	width: 100%;
	padding: 12px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
	color: var(--text);
	font-size: 16px;
	letter-spacing: .3px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	user-select: all;
}

.pg-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.field {
	display: grid;
	gap: 6px;
}

.field input[type="number"],
.field input[type="text"],
.field textarea {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel);
	color: var(--text);
	font-size: 14px;
}

.field textarea {
	min-height: 70px;
	resize: vertical;
}

.cb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text);
}

.cb input {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

.opts-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(220px, 1fr));
	gap: 12px 18px;
}

@media (max-width: 640px) {
	.opts-grid {
		grid-template-columns: 1fr;
	}
}

.pg-meter {
	display: grid;
	gap: 8px;
}

.meter-bar {
	height: 10px;
	border-radius: 999px;
	background: #1a1f2a;
	border: 1px solid var(--border);
	overflow: hidden;
}

.meter-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #ff6b6b, #ffd36e, #8fdc97, #4ecdc4);
	transition: width .2s ease;
}

.meter-line {
	display: flex;
	gap: 10px;
	align-items: baseline;
}

.meter-label {
	font-size: 13px;
	color: var(--muted);
}

.meter-score {
	font-size: 13px;
}

.warn {
	color: #ffd36e;
}

.error {
	color: #ffb4b4;
}

.ok {
	color: #8fdc97;
}

.mini-hint {
	color: var(--muted);
	font-size: 12px;
}