:root {
	color-scheme: dark;
	font-family: "Segoe UI", system-ui, sans-serif;
	color: #e6edf3;
	background: #0d1117;
	font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 40px 28px;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin-bottom: 30px;
}

.eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #8b949e;
}

h1 { margin: 0; font-size: 36px; letter-spacing: -0.04em; }
.subtitle { margin: 10px 0 0; color: #aeb8c4; line-height: 1.6; }
code { font-family: Consolas, monospace; color: #9dcbff; }

.badge {
	flex-shrink: 0;
	padding: 8px 12px;
	border: 1px solid #27533c;
	border-radius: 30px;
	color: #8edab0;
	background: #11251a;
	font-size: 12px;
}

.settings {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(240px, 2fr);
	gap: 18px 24px;
	padding: 22px;
	border: 1px solid #30363d;
	border-radius: 12px;
	background: #161b22;
	margin-bottom: 24px;
}

.field { display: flex; flex-direction: column; gap: 9px; }
label { font-size: 13px; font-weight: 600; }
.key-row { display: flex; gap: 8px; }
.key-row input { flex: 1; min-width: 0; }

input[type="password"], input[type="text"], select {
	width: 100%;
	min-height: 42px;
	border: 1px solid #3b434d;
	border-radius: 6px;
	background: #0d1117;
	color: inherit;
	padding: 9px 12px;
	font: inherit;
	font-size: 14px;
}

.checkbox-row { display: flex; align-items: center; gap: 9px; grid-column: 1 / -1; font-weight: 400; }
input[type="checkbox"] { accent-color: #6aaaff; width: 16px; height: 16px; }
[hidden] { display: none !important; }
.settings-hint { grid-column: 1 / -1; margin: 0; }
.hint { font-size: 12px; line-height: 1.6; color: #9ca7b4; }

.editors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.editor { min-width: 0; }
.editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; margin-bottom: 9px; }
.output-actions { display: flex; gap: 12px; }

textarea {
	width: 100%;
	min-height: 340px;
	resize: vertical;
	padding: 17px;
	border: 1px solid #30363d;
	border-radius: 10px;
	background: #11161d;
	color: #d8e1ec;
	font: 13px / 1.7 Consolas, "Courier New", monospace;
	tab-size: 4;
}

textarea[readonly] { background: #141b24; }
textarea::placeholder { color: #738092; }
button, .file-button { cursor: pointer; }
button { font: inherit; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 10px 15px; border: 1px solid transparent; }
.primary { color: #07101c; background: #79b4ff; }
.primary:hover:not(:disabled) { background: #a0caff; }
.secondary { color: #d5dee8; background: #212832; border-color: #3b434d; }
.secondary:hover:not(:disabled) { background: #2c3542; }
.text-button { padding: 4px 0; border: 0; color: #9dcbff; background: transparent; }
.text-button:hover:not(:disabled) { text-decoration: underline; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: 0.5; }
.file-button { position: relative; color: #9dcbff; font-size: 12px; overflow: hidden; }
.file-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
:focus-visible { outline: 2px solid #8ebfff; outline-offset: 3px; }
.file-button:focus-within { outline: 2px solid #8ebfff; outline-offset: 3px; }

.actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
#status { flex: 1; min-width: 230px; margin: 0 0 0 6px; font-size: 13px; line-height: 1.6; color: #aeb8c4; }
#status[data-kind="error"], .error { color: #ffb0ac; }
#status[data-kind="success"] { color: #8edab0; }
footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid #272e37; color: #8996a5; font-size: 12px; line-height: 1.7; }
footer p { margin: 0 0 9px; }

@media (max-width: 850px) {
	main { padding: 25px 18px; }
	header { align-items: flex-start; flex-direction: column; gap: 16px; }
	.settings, .editors { grid-template-columns: 1fr; }
	textarea { min-height: 270px; }
	h1 { font-size: 31px; }
	#status { flex-basis: 100%; margin: 4px 0 0; }
}