:root {
	--bg: #ffffff;
	--fg: #111111;
	--muted: #666666;
	--border: #cccccc;
	--input-bg: #ffffff;
	--btn-bg: #111111;
	--btn-fg: #ffffff;
	--btn-disabled-bg: #888888;
	--progress-bg: #dddddd;
	--progress-fill: #111111;
	--code-bg: #f4f4f4;
	--pane-info-bg: #f7f7f7;
}

:root[data-theme="dark"],
:root[data-theme="system"] {
	--bg: #111111;
	--fg: #eeeeee;
	--muted: #999999;
	--border: #2a2a2a;
	--input-bg: #1a1a1a;
	--btn-bg: #eeeeee;
	--btn-fg: #111111;
	--btn-disabled-bg: #555555;
	--progress-bg: #333333;
	--progress-fill: #eeeeee;
	--code-bg: #1a1a1a;
	--pane-info-bg: #161616;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--bg: #111111;
		--fg: #eeeeee;
		--muted: #999999;
		--border: #2a2a2a;
		--input-bg: #1a1a1a;
		--btn-bg: #eeeeee;
		--btn-fg: #111111;
		--btn-disabled-bg: #555555;
		--progress-bg: #333333;
		--progress-fill: #eeeeee;
		--code-bg: #1a1a1a;
		--pane-info-bg: #161616;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: monospace;
	font-size: 14px;
	line-height: 1.6;

	transition: background 0.5s;
}

/* ── Layout ── */

.layout {
	display: flex;
	min-height: 100vh;
}

/* ── Left pane (tool) ── */

.pane-tool {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	border-right: 1px solid var(--border);
}

.pane-tool-inner {
	width: 100%;
	max-width: 680px;
}

/* ── Right pane (info) ── */

.pane-info {
	width: 360px;
	flex-shrink: 0;
	background: var(--pane-info-bg);
	display: flex;
	align-items: stretch;
}

.pane-info-inner {
	width: 100%;
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	transition: background 0.5s;
}

/* ── Theme toggle ── */

.theme-toggle {
	display: flex;
	gap: 0.35rem;
	align-self: flex-start;
}

.theme-btn {
	background: none;
	border: 1px solid var(--border);
	color: var(--muted);
	font-family: monospace;
	font-size: 11px;
	padding: 0.2rem 0.5rem;
	cursor: pointer;
	transition: border-color 0.5s, color 0.5s;
}

.theme-btn:hover {
	color: var(--fg);
}

.theme-btn.active {
	border-color: var(--fg);
	color: var(--fg);
}

/* ── Brand / tagline / description ── */

.info-top {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.brand {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--muted);
}

.tagline {
	font-size: 2rem;
	font-weight: normal;
	line-height: 1.2;
}

.description {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.75;
}

.site-link {
	color: var(--fg);
	text-decoration: none;
	font-size: 13px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 1px;
	align-self: flex-start;
	transition: border-color 0.5s;
}

.site-link:hover {
	border-color: var(--fg);
}

.cli-blurb {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
	margin-top: 6px;
}

/* ── How it works ── */

.info-bottom {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.how-steps {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.how-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.step-n {
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.1em;
	flex-shrink: 0;
	padding-top: 2px;
}

.how-step h3 {
	font-size: 0.85rem;
	font-weight: normal;
	margin-bottom: 0.2rem;
}

.how-step p {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.65;
}

/* ── Specs ── */

.specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0.5rem;
	color: var(--muted);
	font-size: 12px;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	align-items: center;
}

.specs-dot {
	opacity: 0.4;
}

/* ── Tool pane internals ── */

.tab-nav {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.tab {
	background: none;
	border: 1px solid var(--border);
	color: var(--muted);
	cursor: pointer;
	font-family: monospace;
	font-size: 14px;
	padding: 0.3rem 0.8rem;
	transition:
		border-color 0.5s,
		color 0.5s;
}

.tab.active {
	border-color: var(--fg);
	color: var(--fg);
}

.tab:hover:not(.active) {
	color: var(--fg);
}

section#section-upload,
section#section-download {
	display: none;
}

section#section-upload.visible,
section#section-download.visible {
	display: block;
}

form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 1rem;
}

input[type="file"],
input[type="text"] {
	background: var(--input-bg);
	border: 1px solid var(--border);
	color: var(--fg);
	font-family: monospace;
	font-size: 14px;
	padding: 0.3rem 0.5rem;
	flex: 1;
	min-width: 0;
}

input[type="text"]::placeholder {
	color: var(--muted);
}

button {
	background: var(--btn-bg);
	border: none;
	color: var(--btn-fg);
	cursor: pointer;
	font-family: monospace;
	font-size: 14px;
	padding: 0.3rem 0.8rem;
	white-space: nowrap;
}

button:disabled {
	background: var(--btn-disabled-bg);
	cursor: default;
}

progress {
	display: none;
	width: 100%;
	height: 4px;
	border: none;
	margin-bottom: 0.75rem;
	accent-color: var(--progress-fill);
	background: var(--progress-bg);
}

progress.visible {
	display: block;
}

p#upload-status,
p#download-status {
	color: var(--muted);
	margin-bottom: 0.75rem;
	min-height: 1.2em;
	word-break: break-all;
}

p#upload-status.error,
p#download-status.error {
	color: #cc3333;
}

#upload-result,
#download-btn {
	display: none;
}

#upload-result.visible {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

#download-btn.visible {
	display: inline-block;
}

code {
	background: var(--code-bg);
	padding: 0.2rem 0.4rem;
	font-family: monospace;
	font-size: 14px;
	word-break: break-all;
}

#file-id-text {
	flex: 1;
}

#qr-canvas {
	display: none;
	margin-top: 1.25rem;
	border: 1px solid var(--border);
	padding: 0.5rem;
	background: #fff;
}

#qr-canvas.visible {
	display: block;
}

/* ── Curl block ── */

.curl-block {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border);
}

.curl-label {
	color: var(--muted);
	font-size: 12px;
	margin-bottom: 0.75rem;
}

.cmd-block {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--border);
	background: var(--code-bg);
	overflow: hidden;
}

.cmd-block code {
	flex: 1;
	padding: 0.6rem 0.75rem;
	font-family: monospace;
	font-size: 12px;
	background: none;
	word-break: break-all;
	display: flex;
	align-items: center;
}

.cmd-copy {
	background: none;
	border: none;
	border-left: 1px solid var(--border);
	color: var(--muted);
	cursor: pointer;
	font-family: monospace;
	font-size: 12px;
	padding: 0.6rem 0.75rem;
	white-space: nowrap;
	transition:
		color 0.5s,
		background 0.5s;
	flex-shrink: 0;
}

.cmd-copy:hover {
	color: var(--fg);
	background: var(--border);
}

/* ── SEO footer ── */

.seo-footer {
	padding: 2.5rem 3rem;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.8;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.seo-footer ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.5rem;
}

.seo-footer ul li::before {
	content: "— ";
	opacity: 0.4;
}

.seo-footer a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	padding-bottom: 1px;
	align-self: flex-start;
	transition: color 0.3s, border-color 0.3s;
}

.seo-footer a:hover {
	color: var(--fg);
	border-color: var(--fg);
}

/* ── FAQ page ── */

.faq-wrap {
	max-width: 680px;
	margin: 0 auto;
	padding: 3rem 2rem 5rem;
}

.faq-back {
	display: inline-block;
	color: var(--muted);
	text-decoration: none;
	font-size: 12px;
	border-bottom: 1px solid transparent;
	margin-bottom: 2.5rem;
	transition: color 0.3s, border-color 0.3s;
}

.faq-back:hover {
	color: var(--fg);
	border-color: var(--border);
}

.faq-brand {
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	color: var(--muted);
	margin-bottom: 0.75rem;
}

.faq-title {
	font-size: 1.75rem;
	font-weight: normal;
	margin-bottom: 0.75rem;
}

.faq-intro {
	color: var(--muted);
	font-size: 13px;
	line-height: 1.75;
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--border);
}

.faq-section {
	margin-bottom: 3rem;
}

.faq-section-title {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--muted);
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.faq-q {
	margin-bottom: 2rem;
}

.faq-q h3 {
	font-size: 0.9rem;
	font-weight: normal;
	margin-bottom: 0.4rem;
}

.faq-q p,
.faq-q pre {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.75;
}

.faq-q pre {
	background: var(--code-bg);
	padding: 0.6rem 0.75rem;
	margin-top: 0.5rem;
	overflow-x: auto;
}

.faq-q a {
	color: var(--fg);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
}

/* ── Mobile: stack tool on top, info on bottom ── */

@media (max-width: 700px) {
	.layout {
		flex-direction: column;
	}

	.pane-tool {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding: 2.5rem 1.5rem;
		align-items: flex-start;
	}

	.pane-tool-inner {
		max-width: 100%;
	}

	.pane-info {
		width: 100%;
	}

	.pane-info-inner {
		padding: 2.5rem 1.5rem;
		gap: 2rem;
	}

	.tagline {
		font-size: 1.6rem;
	}

	.specs {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}

	.specs-dot {
		display: none;
	}
}