/* dashboard.rootuno.com — shares rootuno.com's palette/type so the two feel
   like one product. Single dark theme (no light variant), matching the
   marketing site's own commitment to `color-scheme: dark`. */

:root {
	--bg: #0a0e14;
	--bg-elevated: #10161f;
	--bg-terminal: #0d1117;
	--border: #212936;
	--text: #e6edf3;
	--text-dim: #8b98a9;
	--text-dimmer: #5b6779;
	--accent: #34d399;
	--accent-dim: #1f8a63;
	--warn: #f5a623;
	--danger: #f0655a;
	--radius: 10px;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ---------- topbar ---------- */

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 24px;
	background: rgba(10, 14, 20, 0.85);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid var(--border);
}

.brand {
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--font-mono);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--text);
}

.brand .prompt { color: var(--accent); }

nav { display: flex; gap: 24px; align-items: center; }
nav a {
	text-decoration: none;
	color: var(--text-dim);
	font-size: 0.92rem;
	transition: color 0.15s ease;
}
nav a:hover { color: var(--text); }
.inline { display: inline; }
.topbar button { margin-top: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; }

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

main {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px 80px;
}

h1 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: -0.02em;
	margin: 0 0 8px;
}

h2 { font-size: 1.1rem; margin: 1.75rem 0 0.75rem; }

p.muted, .muted { color: var(--text-dim); font-size: 0.92rem; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--accent);
	background: rgba(52, 211, 153, 0.1);
	border: 1px solid rgba(52, 211, 153, 0.25);
	padding: 4px 11px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- forms ---------- */

label { display: block; margin-top: 1.1rem; font-size: 0.88rem; color: var(--text-dim); }

input, select {
	width: 100%;
	padding: 0.6rem 0.7rem;
	margin-top: 0.35rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--bg-elevated);
	color: var(--text);
	font-size: 0.95rem;
}
input:focus, select:focus { border-color: var(--accent-dim); }

.btn, button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 1.4rem;
	padding: 0.6rem 1.15rem;
	border-radius: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	background: var(--accent);
	color: #04140d;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	font-family: inherit;
}
.btn:hover, button:hover { background: #4fe3ac; transform: translateY(-1px); }

.btn.secondary, button.secondary {
	background: transparent;
	color: var(--text);
	border-color: var(--border);
}
.btn.secondary:hover, button.secondary:hover { border-color: var(--text-dimmer); background: transparent; }

/* ---------- altcha widget ---------- */

altcha-widget {
	--altcha-color-base: var(--bg-elevated);
	--altcha-color-base-content: var(--text);
	--altcha-color-neutral: var(--border);
	--altcha-color-neutral-content: var(--text-dim);
	--altcha-color-primary: var(--accent);
	--altcha-color-primary-content: #04140d;
	--altcha-color-error: var(--danger);
	--altcha-border-color: var(--border);
	--altcha-border-radius: 8px;
	--altcha-max-width: 100%;
	display: block;
	margin-top: 1.1rem;
	font-family: inherit;
}

/* ---------- feedback ---------- */

.flash { color: var(--accent); font-family: var(--font-mono); font-size: 0.88rem; }
.error { color: var(--danger); font-family: var(--font-mono); font-size: 0.88rem; }

/* ---------- panels & tables ---------- */

.panel {
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	margin-top: 1.25rem;
}

table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
th, td { text-align: left; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
th { color: var(--text-dim); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
td button { margin-top: 0; padding: 0.35rem 0.7rem; font-size: 0.82rem; }

code {
	font-family: var(--font-mono);
	background: rgba(139, 152, 169, 0.15);
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	font-size: 0.9em;
}

/* ---------- terminal-style key reveal ---------- */

.terminal {
	background: var(--bg-terminal);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-top: 1.25rem;
}
.terminal-titlebar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--bg-elevated);
	border-bottom: 1px solid var(--border);
}
.terminal-titlebar .dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-red { background: #f0655a; }
.dot-yellow { background: #f5a623; }
.dot-green { background: #34d399; }
.terminal-titlebar span.path {
	margin-left: 6px;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--text-dimmer);
}
.terminal pre {
	margin: 0;
	padding: 16px 18px 20px;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	line-height: 1.6;
	overflow-x: auto;
	color: var(--accent);
	white-space: pre-wrap;
	word-break: break-all;
}