:root {
	--radius: 16px;
	--page-maxw: 680px;
	--page-padding: 24px;
}

:root,
html[data-theme="dark"] {
	--bg: #061224;
	--bg2: #0b1d35;
	--text: #f8fafc;
	--card-bg: #0b1d35;
	--muted: #cbd5e1;
	--border: rgba(255,255,255,0.12);
	--input-bg: #132540;
	--input-text: #ffffff;
	--accent: #56ccf2;
	--accent-text: #052033;
	--shadow: 0 18px 50px rgba(0,0,0,0.18);
	--success-bg: rgba(34,197,94,0.12);
	--success-border: rgba(34,197,94,0.24);
	--error-bg: rgba(239,68,68,0.12);
	--error-border: rgba(239,68,68,0.24);
}

html[data-theme="light"] {
	--bg: #f8fafc;
	--bg2: #e2e8f0;
	--text: #0f172a;
	--card-bg: #ffffff;
	--muted: #475569;
	--border: #cbd5e1;
	--input-bg: #ffffff;
	--input-text: #0f172a;
	--accent: #0ea5e9;
	--accent-text: #ffffff;
	--shadow: 0 18px 50px rgba(15,23,42,0.08);
	--success-bg: #dcfce7;
	--success-border: #86efac;
	--error-bg: #fee2e2;
	--error-border: #fca5a5;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	font-family: Inter, Arial, sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top left, rgba(54,198,255,0.18), transparent 28%),
		linear-gradient(180deg, var(--bg), var(--bg2));
}

.page {
	max-width: var(--page-maxw);
	margin: 0 auto;
	padding: var(--page-padding);
}

.topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.topbar .brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--text);
}

.topbar .brand img {
	width: 28px;
	height: 28px;
}

.topbar .lang,
.theme-toggle {
	color: var(--text);
	text-decoration: none;
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 8px 12px;
	background: transparent;
	cursor: pointer;
	font: inherit;
}

.topbar .lang:hover,
.theme-toggle:hover {
	background: rgba(255,255,255,0.04);
}

html[data-theme="light"] .topbar .lang:hover,
html[data-theme="light"] .theme-toggle:hover {
	background: rgba(15,23,42,0.04);
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.card,
.embed {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	box-shadow: var(--shadow);
}

.embed {
	margin-top: 20px;
}

.card h1,
.embed h3,
.footer a,
.msg {
	color: var(--text);
}

.lead {
	color: var(--muted);
	margin-bottom: 18px;
}

.form > div:first-child {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.form input[type="email"] {
	flex: 1 1 260px;
	min-width: 0;
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	padding: 12px 14px;
	box-sizing: border-box;
}

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

.form input[type="email"]:focus,
textarea#code:focus,
textarea#generated-embed-code:focus,
.embed-field input:focus,
.embed-field select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(86,204,242,0.18);
}

html[data-theme="light"] .form input[type="email"]:focus,
html[data-theme="light"] textarea#code:focus,
html[data-theme="light"] textarea#generated-embed-code:focus,
html[data-theme="light"] .embed-field input:focus,
html[data-theme="light"] .embed-field select:focus {
	box-shadow: 0 0 0 3px rgba(14,165,233,0.18);
}

.form button,
.copy button,
.embed-actions button {
	background: var(--accent);
	color: var(--accent-text);
	border: 1px solid var(--accent);
	border-radius: calc(var(--radius) - 4px);
	padding: 12px 16px;
	font-weight: 600;
	cursor: pointer;
}

.form button:hover,
.copy button:hover,
.embed-actions button:hover {
	filter: brightness(0.97);
}

.cf-turnstile {
	margin-top: 12px;
}

.msg {
	display: none;
	margin-top: 14px;
	border-radius: calc(var(--radius) - 4px);
	padding: 12px 14px;
}

.msg.success {
	background: var(--success-bg);
	border: 1px solid var(--success-border);
	color: var(--text);
}

.msg.error {
	background: var(--error-bg);
	border: 1px solid var(--error-border);
	color: var(--text);
}

.footer {
	margin-top: 18px;
	text-align: center;
}

.footer a {
	color: var(--text);
}

textarea#code,
textarea#generated-embed-code,
.embed-field input,
.embed-field select {
	width: 100%;
	background: var(--input-bg);
	color: var(--input-text);
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 4px);
	padding: 12px 14px;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.card,
	.embed {
		padding: 18px;
	}

	.form > div:first-child {
		flex-direction: column;
		align-items: stretch;
	}

	.form button {
		width: 100%;
	}

	.topbar {
		flex-direction: column;
		align-items: stretch;
	}

	.topbar-actions {
		width: 100%;
		justify-content: space-between;
	}
}