:root {
	color-scheme: light dark;

	--bg: #ffffff;
	--text: #111827;
	--muted: #4b5563;
	--card: #ffffff;
	--border: #e5e7eb;

	--accent: #007bff;
	--accent-hover: #0056b3;
	--secondary: #6c757d;
	--secondary-hover: #5a6268;

	--success-bg: #e6ffe6;
	--success-border: #2e7d32;

	--error-bg: #ffe6e6;
	--error-border: #b91c1c;
	--error-text: #b91c1c;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1220;
		--text: #e5e7eb;
		--muted: #9ca3af;
		--card: #0f172a;
		--border: #243041;

		--accent: #3b82f6;
		--accent-hover: #2563eb;
		--secondary: #64748b;
		--secondary-hover: #94a3b8;

		--success-bg: #0b2a16;
		--success-border: #22c55e;

		--error-bg: #2a0b0b;
		--error-border: #ef4444;
		--error-text: #fecaca;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: sans-serif;
	background: var(--bg);
	color: var(--text);
}

.container {
	max-width: 720px;
	margin: 2rem auto;
	padding: 0 1rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.header h1 {
	margin: 0;
	font-size: 1.75rem;
}

.subtitle {
	margin: 0.35rem 0 0;
	color: var(--muted);
}

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1rem;
}

.info h2 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.info ul {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--muted);
}

.info li { margin: 0.35rem 0; }

.form-group { margin-bottom: 1rem; }

label { display: block; margin-bottom: .5rem; }

.mode-row {
	display: flex;
	gap: 0.75rem;
}

.radio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.35rem 0.55rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	flex: 1 1 0;
}

input[type="text"], textarea {
	width: 100%;
	padding: .65rem .75rem;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 8px;
}

textarea { resize: vertical; min-height: 110px; }

input::placeholder, textarea::placeholder { color: var(--muted); }

button {
	padding: .6rem 1rem;
	cursor: pointer;
	background-color: var(--accent);
	color: white;
	border: none;
	border-radius: 8px;
}

#crypto-form button[type="submit"] {
	width: 100%;
}

button:hover { background-color: var(--accent-hover); }

.result {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--success-bg);
	border: 1px solid var(--success-border);
	border-radius: 10px;
	word-break: break-word;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.result.error-mode {
	background-color: var(--error-bg);
	border-color: var(--error-border);
	color: var(--error-text);
}

.result button {
	align-self: flex-start;
	background-color: var(--secondary);
	width: auto;
}

.result button:hover { background-color: var(--secondary-hover); }