/* The activation page a customer reaches after paying (ADR-0038 §3).
   Deliberately one small stylesheet with no framework and no web fonts: it loads
   on a phone, on a hotspot, in a field. */
:root {
	color-scheme: dark;
	--bg: #0a0614;
	--sheet: #141020;
	--hair: #262036;
	--text: #ece9f5;
	--muted: #a49dbd;
	--accent: #7040d8;
	--accent-2: #b9a4ff;
	--warn: #ffb454;
	--good: #54e8b1;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 28px 18px 56px;
	background: radial-gradient(circle at 70% -10%, rgba(112, 64, 216, 0.22), transparent 60%), var(--bg);
	color: var(--text);
	font: 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main {
	max-width: 620px;
	margin: 0 auto;
}
h1 {
	margin: 0 0 10px;
	font-size: clamp(1.7rem, 6vw, 2.3rem);
	letter-spacing: -0.02em;
}
h2 {
	margin: 0 0 8px;
	font-size: 1.1rem;
}
.lede {
	margin: 0 0 26px;
	color: var(--muted);
}
label {
	display: block;
	margin-top: 20px;
	font-weight: 600;
}
.hint {
	margin: 4px 0 8px;
	font-size: 13px;
	color: var(--muted);
}
textarea,
input {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--hair);
	border-radius: 10px;
	background: var(--sheet);
	color: var(--text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	/* A licence key is one long unbroken string; without this it scrolls sideways
	   and a customer cannot tell whether all of it pasted. */
	overflow-wrap: anywhere;
}
textarea:focus,
input:focus {
	outline: none;
	border-color: var(--accent);
}
button {
	margin-top: 18px;
	width: 100%;
	min-height: 48px; /* a thumb, outdoors */
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 650;
	cursor: pointer;
}
button:disabled {
	opacity: 0.6;
	cursor: default;
}
.panel {
	margin-top: 26px;
	padding: 16px 18px;
	border: 1px solid var(--hair);
	border-radius: 14px;
	background: var(--sheet);
}
.panel.error {
	border-color: var(--warn);
	color: var(--warn);
}
.panel.ok {
	border-color: color-mix(in oklab, var(--good) 50%, var(--hair));
}
.panel.ok h2 {
	color: var(--good);
}
.panel p {
	color: var(--muted);
	font-size: 14px;
}
pre {
	margin: 14px 0 0;
	padding: 12px;
	border-radius: 10px;
	background: #0a0614;
	color: var(--accent-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	/* ★ THE PREFIX IS LOAD-BEARING, NOT LEGACY TIDINESS. iOS Safari implements
	   this only as -webkit-user-select; unprefixed, a tap on an iPhone selects
	   one word instead of the whole code, and the customer is left dragging
	   selection handles across a wrapped 138-character string whose last two
	   letters sit alone on the final line. That is how a genuine certificate
	   reached the owner's Streamer cut short on 2026-08-14. */
	-webkit-user-select: all;
	user-select: all; /* one tap selects the whole code */
}
.meta {
	margin: 12px 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--muted);
}
.foot {
	margin-top: 34px;
	font-size: 13px;
	color: var(--muted);
}
a {
	color: var(--accent-2);
}