/* adm.one — Cipher modern design system. Dark-first; light mode via
   prefers-color-scheme or an explicit data-theme set by theme.js. */

:root {
	--bg0: #0b0f1e;
	--bg1: #0e1226;
	--bg-hero: linear-gradient(135deg, #0b0f1e 0%, #151038 60%, #2a0f45 100%);
	--surface: rgba(255, 255, 255, 0.05);
	--surface-border: rgba(255, 255, 255, 0.12);
	--text: #e8e6f5;
	--text-muted: #a49bc6;
	--text-faint: #6d6590;
	--accent-a: #7c5cff;
	--accent-b: #00d4ff;
	--accent-grad: linear-gradient(90deg, #7c5cff, #00d4ff);
	/* Darker gradient for filled controls: white text on the bright --accent-grad
	   (esp. its #00d4ff cyan end) is illegible. These stops clear WCAG AA (~5:1+)
	   against white. The bright --accent-grad is kept for gradient-on-dark text. */
	--accent-grad-fill: linear-gradient(90deg, #6d28d9, #0e7490);
	--ok: #3ddc97;
	--danger: #ff5c7a;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--bg0: #f7f7fb;
	--bg1: #ffffff;
	--bg-hero: linear-gradient(135deg, #f2f1fa 0%, #e9e4f9 60%, #efe3f6 100%);
	--surface: #ffffff;
	--surface-border: #e4e2ef;
	--text: #17123a;
	--text-muted: #5f5a78;
	--text-faint: #8d88a6;
	--ok: #0e9f5b;
	--danger: #d92c4d;
	color-scheme: light;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]):not([data-theme="light"]) {
		--bg0: #f7f7fb;
		--bg1: #ffffff;
		--bg-hero: linear-gradient(135deg, #f2f1fa 0%, #e9e4f9 60%, #efe3f6 100%);
		--surface: #ffffff;
		--surface-border: #e4e2ef;
		--text: #17123a;
		--text-muted: #5f5a78;
		--text-faint: #8d88a6;
		--ok: #0e9f5b;
		--danger: #d92c4d;
		color-scheme: light;
	}
}

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

body {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
	background: var(--bg0);
	color: var(--text);
	line-height: 1.6;
	min-height: 100vh;
}

code,
.mono {
	font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

a {
	color: var(--accent-b);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- chrome --- */

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	max-width: 1080px;
	margin: 0 auto;
}

.nav .brand {
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	color: var(--text);
}

.nav .brand:hover {
	text-decoration: none;
}

.nav .links {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.nav .links a {
	color: var(--text-muted);
	font-size: 0.95rem;
}

.theme-toggle {
	background: none;
	border: 1px solid var(--surface-border);
	border-radius: 999px;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0.4rem 0.6rem;
}

.theme-toggle:hover {
	color: var(--text);
}

/* --- buttons --- */

.btn {
	display: inline-block;
	border: 1px solid var(--surface-border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.7rem 1.6rem;
	text-align: center;
	transition:
		transform 0.15s ease,
		opacity 0.15s ease;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.btn-primary {
	background: var(--accent-grad-fill);
	border: none;
	color: #ffffff;
}

.btn-danger {
	background: none;
	border-color: var(--danger);
	color: var(--danger);
}

/* --- layout blocks --- */

.hero {
	background: var(--bg-hero);
	padding-bottom: 4rem;
}

.hero-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 5rem 1.5rem 0;
	text-align: center;
}

.hero h1 {
	font-size: clamp(2.4rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.hero .accent {
	background: var(--accent-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero .tagline {
	color: var(--text-muted);
	font-size: 1.15rem;
	margin: 1.2rem auto 2rem;
	max-width: 40rem;
}

.section {
	max-width: 1080px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
}

.section > h2 {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-b);
	margin-bottom: 1.5rem;
}

.grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

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

.card h3 {
	font-size: 1.05rem;
	margin-bottom: 0.4rem;
}

.card p {
	color: var(--text-muted);
	font-size: 0.95rem;
}

.card.link-card {
	color: inherit;
	display: block;
	transition:
		transform 0.15s ease,
		border-color 0.15s ease;
}

.card.link-card:hover {
	border-color: var(--accent-a);
	text-decoration: none;
	transform: translateY(-2px);
}

.badge {
	color: var(--text-faint);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- forms --- */

.panel {
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	margin: 4rem auto;
	max-width: 430px;
	padding: 2.5rem;
}

.panel h1 {
	font-size: 1.6rem;
	margin-bottom: 1.5rem;
	text-align: center;
}

.field {
	margin-bottom: 1.25rem;
}

.field label {
	color: var(--text-muted);
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.field input {
	background: var(--bg1);
	border: 1px solid var(--surface-border);
	border-radius: 8px;
	color: var(--text);
	font-size: 1rem;
	padding: 0.7rem 0.9rem;
	width: 100%;
}

.field input:focus {
	border-color: var(--accent-a);
	outline: none;
}

.field small {
	color: var(--text-faint);
	font-size: 0.8rem;
}

.form-error {
	color: var(--danger);
	font-size: 0.9rem;
	margin-bottom: 1rem;
	min-height: 1.2rem;
}

/* --- status + footer --- */

.status-ok {
	color: var(--ok);
	font-weight: 700;
}

.status-bad {
	color: var(--danger);
	font-weight: 700;
}

.kv {
	border-bottom: 1px solid var(--surface-border);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.5rem 0;
}

.kv strong {
	color: var(--text-muted);
	font-weight: 600;
}

.footer {
	border-top: 1px solid var(--surface-border);
	color: var(--text-faint);
	font-size: 0.85rem;
	margin-top: 3rem;
	padding: 2rem 1.5rem;
	text-align: center;
}