/* ============================================================
   ALEX-ID MANAGER - design system v2 (violet)
   Shared by the public site (index.html) and the admin (admin.html)
   ============================================================ */

:root {
	--bg: #07050d;
	--bg-2: #0d0918;
	--card: rgba(255, 255, 255, 0.045);
	--card-solid: #130e22;
	--line: rgba(255, 255, 255, 0.09);
	--line-strong: rgba(255, 255, 255, 0.17);
	--txt: #f1ecff;
	--muted: #a99dc6;
	--accent: #8b5cf6;
	--accent-2: #d946ef;
	--accent-soft: rgba(139, 92, 246, 0.13);
	--accent-line: rgba(139, 92, 246, 0.34);
	--danger: #ff5470;
	--warn: #ffb340;
	--ok: #22d18c;
	--radius: 18px;
	--radius-sm: 11px;
	--shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	--glow: 0 14px 38px rgba(139, 92, 246, 0.34);
	--grad: linear-gradient(120deg, #a78bfa, #d946ef);
	--font: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--txt);
	font-family: var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* violet aurora wash behind everything */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(62rem 42rem at 8% -12%, rgba(139, 92, 246, 0.26), transparent 60%),
		radial-gradient(54rem 38rem at 96% 4%, rgba(217, 70, 239, 0.18), transparent 62%),
		radial-gradient(48rem 34rem at 50% 112%, rgba(99, 102, 241, 0.16), transparent 64%);
	pointer-events: none;
}

/* faint grid */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(circle at 50% 26%, #000 18%, transparent 76%);
	pointer-events: none;
}

a {
	color: inherit;
	text-decoration: none;
}

.wrap {
	width: min(1200px, 92vw);
	margin: 0 auto;
}

.hidden {
	display: none !important;
}

.muted {
	color: var(--muted);
}

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

/* ---------------- buttons ---------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 0;
	border-radius: 999px;
	padding: 14px 26px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
	background: var(--grad);
	color: #fff;
	box-shadow: var(--glow);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 46px rgba(139, 92, 246, 0.46);
}

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

.btn.ghost {
	background: rgba(255, 255, 255, 0.05);
	color: var(--txt);
	border: 1px solid var(--line-strong);
	box-shadow: none;
}

.btn.ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--accent-line);
	box-shadow: none;
}

.btn.danger {
	background: rgba(255, 84, 112, 0.14);
	color: var(--danger);
	border: 1px solid rgba(255, 84, 112, 0.35);
	box-shadow: none;
}

.btn.sm {
	padding: 10px 18px;
	font-size: 13.5px;
}

/* ---------------- floating pill nav ---------------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 60;
	padding: 16px 0 6px;
}

.nav-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 10px 9px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(16, 11, 28, 0.72);
	backdrop-filter: blur(16px);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.nav.scrolled .nav-in {
	border-color: var(--accent-line);
	background: rgba(16, 11, 28, 0.92);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font-weight: 700;
	letter-spacing: -0.2px;
	flex: 0 0 auto;
}

.brand .dot {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--grad);
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	box-shadow: var(--glow);
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 14.5px;
	color: var(--muted);
}

.nav-links a:hover {
	color: var(--txt);
}

@media (max-width: 900px) {
	.nav-links a:not(.btn) {
		display: none;
	}
}

/* ---------------- hero ---------------- */
.hero {
	position: relative;
	padding: 54px 0 40px;
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 30px;
	align-items: center;
}

@media (max-width: 980px) {
	.hero {
		grid-template-columns: 1fr;
		padding: 30px 0 30px;
		text-align: center;
	}
}

.tagpill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--accent-line);
	background: var(--accent-soft);
	font-size: 13px;
	color: var(--txt);
	margin-bottom: 24px;
}

.tagpill b {
	color: #d8b4fe;
	font-weight: 700;
}

.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ok);
	box-shadow: 0 0 0 0 rgba(34, 209, 140, 0.6);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	70% {
		box-shadow: 0 0 0 10px rgba(34, 209, 140, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(34, 209, 140, 0);
	}
}

.hero h1 {
	font-size: clamp(42px, 6.4vw, 80px);
	line-height: 0.98;
	letter-spacing: -3px;
	margin: 0 0 22px;
	font-weight: 700;
}

.hero p.lead {
	font-size: 17px;
	line-height: 1.68;
	color: var(--muted);
	margin: 0 0 30px;
	max-width: 34em;
}

@media (max-width: 980px) {
	.hero p.lead {
		margin-left: auto;
		margin-right: auto;
	}
}

.hero-cta {
	display: flex;
	gap: 13px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

@media (max-width: 980px) {
	.hero-cta {
		justify-content: center;
	}
}

/* inline trust ticks */
.ticks {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 13.5px;
	margin-bottom: 26px;
}

@media (max-width: 980px) {
	.ticks {
		justify-content: center;
	}
}

.tick {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tick i {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	color: #d8b4fe;
	font-size: 10px;
	font-style: normal;
	display: grid;
	place-items: center;
}

/* rating block */
.rating {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--card);
	backdrop-filter: blur(8px);
}

.rating .stars {
	color: #fbbf24;
	font-size: 15px;
	letter-spacing: 2px;
}

.rating .rt {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.35;
}

.rating .rt b {
	color: var(--txt);
	display: block;
	font-size: 14px;
}

/* ---------------- spline 3D stage ---------------- */
.stage {
	position: relative;
	height: clamp(360px, 46vw, 560px);
	border-radius: 28px;
	overflow: hidden;
	background:
		radial-gradient(circle at 52% 46%, rgba(139, 92, 246, 0.2), transparent 66%);
}

.stage spline-viewer,
.stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* covers the "Built with Spline" badge in the bottom-right */
.stage .mask {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 150px;
	height: 52px;
	background: var(--bg);
	border-radius: 14px;
	pointer-events: none;
	z-index: 3;
}

.stage .hint {
	position: absolute;
	bottom: 14px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 12px;
	color: var(--muted);
	opacity: 0.75;
	pointer-events: none;
	z-index: 2;
}

.stage .loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 13px;
	color: var(--muted);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	z-index: 1;
}

.stage .fallback {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	padding: 24px;
	text-align: center;
	z-index: 4;
	background: var(--bg-2);
}

.stage .fallback img {
	width: min(100%, 420px);
	border-radius: 18px;
	border: 1px solid var(--line-strong);
}

/* floating glass chips around the robot */
.float-chip {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: rgba(19, 14, 34, 0.72);
	backdrop-filter: blur(10px);
	font-size: 12.5px;
	font-weight: 600;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
	animation: bob 6s ease-in-out infinite;
}

.float-chip.c1 {
	top: 12%;
	left: 2%;
}

.float-chip.c2 {
	top: 34%;
	right: 1%;
	animation-delay: -2s;
}

.float-chip.c3 {
	bottom: 16%;
	left: 6%;
	animation-delay: -4s;
}

@keyframes bob {
	50% {
		transform: translateY(-11px);
	}
}

@media (max-width: 620px) {
	.float-chip {
		display: none;
	}
}

/* ---------------- marquee tickers ---------------- */
.marquee {
	position: relative;
	overflow: hidden;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.025);
	padding: 13px 0;
	white-space: nowrap;
}

.marquee + .marquee {
	border-top: 0;
	background: transparent;
}

.marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	padding-left: 34px;
	animation: marquee 34s linear infinite;
}

.marquee.rev .marquee-track {
	animation-direction: reverse;
	animation-duration: 44s;
}

.marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 34px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: var(--muted);
}

.marquee-item::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0.8;
}

@keyframes marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}

	.float-chip {
		animation: none;
	}
}

/* ---------------- stat strip ---------------- */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	padding: 54px 0 20px;
}

@media (max-width: 820px) {
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

.stat {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	backdrop-filter: blur(8px);
	transition: border-color 0.22s ease, transform 0.22s ease;
}

.stat:hover {
	border-color: var(--accent-line);
	transform: translateY(-3px);
}

.stat .k {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.6px;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stat .l {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 5px;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

/* ---------------- sections ---------------- */
.section {
	padding: 84px 0;
}

.section-head {
	max-width: 660px;
	margin-bottom: 46px;
}

.section-head .eyebrow {
	font-size: 12.5px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #c4b5fd;
	font-weight: 700;
	margin-bottom: 13px;
}

.section-head h2 {
	font-size: clamp(28px, 3.8vw, 46px);
	letter-spacing: -1.6px;
	margin: 0 0 14px;
	line-height: 1.1;
}

.section-head p {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.68;
	margin: 0;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

@media (max-width: 940px) {
	.grid-3 {
		grid-template-columns: 1fr;
	}
}

.feature {
	position: relative;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
	overflow: hidden;
	transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.feature:hover {
	transform: translateY(-5px);
	border-color: var(--accent-line);
	background: rgba(139, 92, 246, 0.07);
}

.feature .ico {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 21px;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	margin-bottom: 17px;
}

.feature h3 {
	margin: 0 0 9px;
	font-size: 18px;
	letter-spacing: -0.3px;
}

.feature p {
	margin: 0;
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.62;
}

/* command showcase + phone mock */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
}

@media (max-width: 940px) {
	.split {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

.cmd-row {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.cmd-row:last-child {
	border-bottom: 0;
}

.cmd-row code {
	font-family: var(--mono);
	font-size: 14px;
	color: #d8b4fe;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	padding: 5px 11px;
	border-radius: 8px;
	flex: 0 0 auto;
	min-width: 86px;
	text-align: center;
}

.cmd-row span {
	color: var(--muted);
	font-size: 14.5px;
	line-height: 1.55;
	padding-top: 5px;
}

.phone {
	background: #0f0a1c;
	border: 1px solid var(--line-strong);
	border-radius: 26px;
	padding: 17px;
	box-shadow: var(--shadow);
	max-width: 380px;
	width: 100%;
	margin: 0 auto;
}

.phone .bar {
	display: flex;
	align-items: center;
	gap: 11px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 15px;
}

.phone .av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--grad);
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}

.phone .bar b {
	font-size: 14.5px;
	display: block;
}

.phone .bar small {
	font-size: 11.5px;
	color: var(--ok);
}

.bubble {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
	white-space: pre-line;
}

.bubble.out {
	margin-left: auto;
	background: rgba(139, 92, 246, 0.24);
	border: 1px solid var(--accent-line);
	border-bottom-right-radius: 4px;
}

.bubble.in {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line);
	border-bottom-left-radius: 4px;
}

.bubble .thumb {
	display: block;
	width: 100%;
	border-radius: 9px;
	margin-bottom: 8px;
}

.bubble .mono {
	font-family: var(--mono);
	font-size: 12.5px;
}

/* service list */
.svc-list {
	display: flex;
	flex-wrap: wrap;
	gap: 11px;
	margin-top: 8px;
}

.svc-tag {
	padding: 11px 19px;
	border-radius: 999px;
	border: 1px solid var(--line-strong);
	background: rgba(255, 255, 255, 0.04);
	font-size: 14px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.svc-tag:hover {
	border-color: var(--accent-line);
	background: var(--accent-soft);
}

/* CTA band */
.cta {
	position: relative;
	border-radius: 28px;
	padding: 66px 40px;
	text-align: center;
	border: 1px solid var(--accent-line);
	background:
		radial-gradient(42rem 22rem at 50% 0%, rgba(139, 92, 246, 0.24), transparent 70%),
		var(--card);
	overflow: hidden;
}

.cta h2 {
	font-size: clamp(27px, 3.6vw, 42px);
	margin: 0 0 13px;
	letter-spacing: -1.4px;
}

.cta p {
	color: var(--muted);
	margin: 0 auto 28px;
	max-width: 46ch;
	line-height: 1.6;
}

/* footer */
.foot {
	border-top: 1px solid var(--line);
	margin-top: 84px;
	padding: 34px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 13.5px;
}

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */

.lock-screen {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}

.lock-card {
	width: min(410px, 100%);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 38px 32px;
	backdrop-filter: blur(16px);
	box-shadow: var(--shadow);
	text-align: center;
}

.lock-card .dot {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	margin: 0 auto 18px;
	font-size: 22px;
	background: var(--grad);
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 800;
	box-shadow: var(--glow);
}

.lock-card h1 {
	font-size: 21px;
	margin: 0 0 7px;
	letter-spacing: -0.5px;
}

.lock-card p {
	color: var(--muted);
	font-size: 14px;
	margin: 0 0 24px;
}

.err {
	color: var(--danger);
	font-size: 13.5px;
	min-height: 20px;
	margin-top: 12px;
}

/* app shell */
.app-head {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(14px);
	background: rgba(13, 9, 24, 0.86);
	border-bottom: 1px solid var(--line);
}

.app-head-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 0;
	flex-wrap: wrap;
}

.pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--line-strong);
	background: rgba(255, 255, 255, 0.05);
	color: var(--muted);
}

.pill.on {
	color: var(--ok);
	border-color: rgba(34, 209, 140, 0.4);
	background: rgba(34, 209, 140, 0.1);
}

.pill.wait {
	color: var(--warn);
	border-color: rgba(255, 179, 64, 0.4);
	background: rgba(255, 179, 64, 0.1);
}

.pill.off {
	color: var(--danger);
	border-color: rgba(255, 84, 112, 0.4);
	background: rgba(255, 84, 112, 0.1);
}

.tabs {
	display: flex;
	gap: 6px;
	padding: 22px 0 26px;
	flex-wrap: wrap;
}

.tab {
	background: transparent;
	border: 1px solid transparent;
	color: var(--muted);
	padding: 10px 20px;
	border-radius: 999px;
	font-family: var(--font);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.16s ease;
}

.tab:hover {
	color: var(--txt);
	background: rgba(255, 255, 255, 0.04);
}

.tab.active {
	color: #fff;
	background: var(--accent-soft);
	border-color: var(--accent-line);
}

.panel {
	display: none;
	animation: fade 0.26s ease;
}

.panel.active {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 18px;
	align-items: start;
}

@keyframes fade {
	from {
		opacity: 0;
		transform: translateY(7px);
	}
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 25px;
	backdrop-filter: blur(9px);
}

.card.span {
	grid-column: 1 / -1;
}

.card.accent {
	border-color: var(--accent-line);
	background:
		radial-gradient(30rem 14rem at 0% 0%, rgba(139, 92, 246, 0.16), transparent 70%),
		var(--card);
}

.card h2 {
	margin: 0 0 6px;
	font-size: 17.5px;
	letter-spacing: -0.3px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.card .sub {
	color: var(--muted);
	font-size: 13.8px;
	line-height: 1.6;
	margin: 0 0 20px;
}

.badge {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	color: #d8b4fe;
}

label.fld {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--muted);
	margin: 0 0 7px;
	letter-spacing: 0.3px;
}

input[type="text"],
input[type="password"],
input[type="tel"],
select,
textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	color: var(--txt);
	font-family: var(--font);
	font-size: 15px;
	outline: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

textarea {
	resize: vertical;
	min-height: 78px;
	line-height: 1.55;
}

.row {
	margin-bottom: 16px;
}

.row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
}

@media (max-width: 560px) {
	.row-2 {
		grid-template-columns: 1fr;
	}
}

.inline {
	display: flex;
	gap: 10px;
	align-items: center;
}

.switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.22);
	margin-bottom: 16px;
	cursor: pointer;
}

.switch b {
	font-size: 14.5px;
	font-weight: 600;
}

.switch small {
	display: block;
	color: var(--muted);
	font-size: 12.5px;
	margin-top: 3px;
	line-height: 1.5;
}

.switch input {
	appearance: none;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	position: relative;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background 0.2s ease;
}

.switch input::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s ease;
}

.switch input:checked {
	background: var(--accent);
}

.switch input:checked::after {
	transform: translateX(20px);
}

/* QR + code display */
.qr-box {
	background: #fff;
	border-radius: 16px;
	padding: 14px;
	width: 268px;
	height: 268px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
}

.qr-box img {
	width: 100%;
	height: 100%;
	display: block;
}

.qr-ph {
	color: #0b0f14;
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-box {
	text-align: center;
	padding: 22px;
	border-radius: 15px;
	border: 1px dashed var(--accent-line);
	background: var(--accent-soft);
	margin-top: 16px;
}

.code-box .code {
	font-family: var(--mono);
	font-size: 33px;
	font-weight: 700;
	letter-spacing: 7px;
	color: #e9d5ff;
}

.steps {
	counter-reset: s;
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}

.steps li {
	counter-increment: s;
	position: relative;
	padding-left: 32px;
	margin-bottom: 11px;
	color: var(--muted);
	font-size: 13.8px;
	line-height: 1.55;
}

.steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: -1px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	color: #d8b4fe;
	font-size: 11.5px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.kv {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14.5px;
}

.kv:last-of-type {
	border-bottom: 0;
}

.kv span:first-child {
	color: var(--muted);
}

.kv span:last-child {
	font-weight: 600;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 15px;
	min-height: 26px;
	align-items: center;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line-strong);
	font-size: 13.5px;
	font-family: var(--mono);
}

.chip button {
	border: 0;
	background: rgba(255, 84, 112, 0.16);
	color: var(--danger);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

/* toast */
.toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translate(-50%, 130%);
	background: var(--card-solid);
	border: 1px solid var(--line-strong);
	color: var(--txt);
	padding: 13px 24px;
	border-radius: 12px;
	font-size: 14.5px;
	font-weight: 600;
	box-shadow: var(--shadow);
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	z-index: 200;
}

.toast.show {
	transform: translate(-50%, 0);
}

.toast.good {
	border-color: rgba(34, 209, 140, 0.45);
	color: var(--ok);
}

.toast.bad {
	border-color: rgba(255, 84, 112, 0.45);
	color: var(--danger);
}

/* ============================================================
   v3 MOTION LAYER — page loader, entrance + scroll animation,
   and the 3D stage blended into the page background
   ============================================================ */

/* ---------- boot loader ---------- */
#boot {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: radial-gradient(760px 460px at 50% 38%, rgba(139, 92, 246, 0.17), transparent 70%), var(--bg);
	transition: opacity 0.7s ease, visibility 0.7s ease;
}
#boot.done { opacity: 0; visibility: hidden; pointer-events: none }
.boot-in { display: grid; justify-items: center; gap: 20px; text-align: center }
.boot-orb { position: relative; width: 132px; height: 132px; display: grid; place-items: center }
.boot-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(139, 92, 246, 0.16);
	border-top-color: var(--accent);
	animation: bootSpin 1.15s linear infinite;
}
.boot-ring.r2 {
	inset: 17px;
	border-color: rgba(217, 70, 239, 0.12);
	border-bottom-color: var(--accent-2);
	animation-duration: 1.9s;
	animation-direction: reverse;
}
.boot-mark {
	width: 66px;
	height: 66px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 26px;
	color: #fff;
	background: var(--grad);
	box-shadow: var(--glow);
	animation: bootPulse 2s ease-in-out infinite;
}
.boot-name { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted) }
.boot-bar { width: 210px; height: 4px; border-radius: 999px; background: rgba(139, 92, 246, 0.16); overflow: hidden }
.boot-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: 0 0 14px rgba(139, 92, 246, 0.75);
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.boot-msg { font-size: 12.5px; color: var(--muted); min-height: 16px }
@keyframes bootSpin { to { transform: rotate(360deg) } }
@keyframes bootPulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.07) } }

/* ---------- scroll progress bar ---------- */
#prog {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 900;
	background: var(--grad);
	box-shadow: 0 0 14px rgba(139, 92, 246, 0.8);
}

/* ---------- first paint ---------- */
body.preload { overflow: hidden }
.nav { opacity: 0; transform: translateY(-14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) }
body.loaded .nav { opacity: 1; transform: none }

.hero-copy > * { opacity: 0; transform: translateY(24px) }
body.loaded .hero-copy > * { animation: heroIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards }
body.loaded .hero-copy > *:nth-child(1) { animation-delay: 0.05s }
body.loaded .hero-copy > *:nth-child(2) { animation-delay: 0.13s }
body.loaded .hero-copy > *:nth-child(3) { animation-delay: 0.21s }
body.loaded .hero-copy > *:nth-child(4) { animation-delay: 0.29s }
body.loaded .hero-copy > *:nth-child(5) { animation-delay: 0.37s }
body.loaded .hero-copy > *:nth-child(6) { animation-delay: 0.45s }
@keyframes heroIn { to { opacity: 1; transform: none } }

.stage {
	opacity: 0;
	transform: translateY(30px) scale(0.97);
	transition: opacity 1s 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1s 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.loaded .stage { opacity: 1; transform: none }

/* ---------- scroll reveal ---------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--d, 0s);
	will-change: opacity, transform;
}
[data-reveal="zoom"] { transform: scale(0.95) }
[data-reveal="left"] { transform: translateX(-34px) }
[data-reveal="right"] { transform: translateX(34px) }
[data-reveal].revealed { opacity: 1; transform: none }

/* ---------- the robot sits on the page background ---------- */
.stage {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
.stage::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	top: 10%;
	bottom: 10%;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 55%, rgba(139, 92, 246, 0.20), transparent 70%);
	filter: blur(34px);
	z-index: 0;
	pointer-events: none;
	animation: auraPulse 6s ease-in-out infinite;
}
@keyframes auraPulse { 0%, 100% { opacity: 0.72; transform: scale(1) } 50% { opacity: 1; transform: scale(1.06) } }
.stage spline-viewer,
.stage spline-viewer canvas { background: transparent !important }
#spline { position: relative; z-index: 1; will-change: transform }
.stage .mask {
	background: radial-gradient(130px 74px at 50% 50%, var(--bg) 55%, transparent 100%) !important;
	border: 0 !important;
	box-shadow: none !important;
}
.stage.live .hint { animation: hintFade 3.4s ease-in-out infinite }
@keyframes hintFade { 0%, 100% { opacity: 0.45 } 50% { opacity: 0.95 } }

/* ---------- micro-motion ---------- */
.svc-tag { animation: popIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both }
.svc-tag:nth-child(2) { animation-delay: 0.06s }
.svc-tag:nth-child(3) { animation-delay: 0.12s }
.svc-tag:nth-child(4) { animation-delay: 0.18s }
.svc-tag:nth-child(5) { animation-delay: 0.24s }
.svc-tag:nth-child(6) { animation-delay: 0.3s }
.svc-tag:nth-child(7) { animation-delay: 0.36s }
.svc-tag:nth-child(8) { animation-delay: 0.42s }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.94) } to { opacity: 1; transform: none } }

.feature,
.stat { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease }
.btn { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, opacity 0.2s ease }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) scale(0.98) }
.cmd-row { transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease }
.cmd-row:hover { transform: translateX(5px) }
.tagpill .live-dot { animation: livePing 1.8s ease-in-out infinite }
@keyframes livePing { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 209, 140, 0.55) } 70% { box-shadow: 0 0 0 9px rgba(34, 209, 140, 0) } }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	#boot { transition: none }
	.nav,
	.hero-copy > *,
	.stage,
	[data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important }
	.stage::before,
	.boot-ring,
	.boot-mark,
	.svc-tag,
	.tagpill .live-dot { animation: none !important }
}

/* Feather the 3D canvas into the page: the scene's own lighting can tint the
   far corners, so the edges of the viewer fade out and the site background
   is the only thing visible around the robot. */
#spline {
	-webkit-mask-image: radial-gradient(ellipse closest-side at 50% 48%, #000 58%, rgba(0, 0, 0, 0.7) 80%, transparent 97%);
	mask-image: radial-gradient(ellipse closest-side at 50% 48%, #000 58%, rgba(0, 0, 0, 0.7) 80%, transparent 97%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* ------------------------------------------------------------
   The robot sits DIRECTLY on the page: no panel, no glow, no
   backdrop of any kind around it. Only the model is visible.
   ------------------------------------------------------------ */
.stage {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
.stage::before,
.stage::after { display: none !important; content: none !important }
.stage .mask { display: none !important }
.stage spline-viewer,
.stage spline-viewer canvas,
#spline { background: none !important; background-color: transparent !important }

/* ------------------------------------------------------------
   v4 - advanced home motion (paired with /anim.js)
   ------------------------------------------------------------ */

/* condensed nav after the hero */
.nav { transition: padding .32s cubic-bezier(.22,.9,.28,1), background .32s ease, box-shadow .32s ease, transform .5s cubic-bezier(.22,.9,.28,1) }
.nav.shrunk { padding: 7px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.45) }
.nav.shrunk .brand span { font-size: 14px }

/* button ink ripple */
.btn { position: relative; overflow: hidden }
.btn .ink {
	position: absolute; width: 12px; height: 12px; border-radius: 50%;
	transform: translate(-50%,-50%) scale(0); background: rgba(255,255,255,.42);
	pointer-events: none; animation: ink .6s ease-out forwards;
}
@keyframes ink { to { transform: translate(-50%,-50%) scale(26); opacity: 0 } }

/* floating chips drift */
.float-chip { transform: translateY(var(--drift, 0px)); transition: transform .18s linear }
.float-chip.c1, .float-chip.c2, .float-chip.c3 { animation-play-state: running }

/* heading underline draws itself */
.draw-line { position: relative; display: inline-block }
.draw-line::after {
	content: ""; position: absolute; left: 0; bottom: -8px; height: 3px; width: 0;
	border-radius: 3px; background: var(--grad); box-shadow: 0 0 18px rgba(139,92,246,.55);
	transition: width .8s cubic-bezier(.22,.9,.28,1) .1s;
}
.draw-line.drawn::after { width: 62px }

/* pointer-hot rows and tags */
.cmd-row, .svc-tag { transition: transform .26s cubic-bezier(.22,.9,.28,1), border-color .26s ease, box-shadow .26s ease, background .26s ease }
.cmd-row.hot { border-color: var(--accent-line); box-shadow: 0 10px 26px rgba(139,92,246,.18) }
.svc-tag.hot { transform: translateY(-3px) scale(1.04); border-color: var(--accent-line); box-shadow: 0 10px 24px rgba(139,92,246,.22) }

/* the robot breathes gently */
@keyframes breathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
.stage.breathe #spline { animation: breathe 6.5s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
	.stage.breathe #spline { animation: none }
	.btn .ink { display: none }
	.draw-line::after { transition: none; width: 62px }
}

/* ============================================================
   v5 - admin management panels (users, tokens, sessions)
   ============================================================ */
.statbar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}
.statbar .stat {
	background: var(--card-solid);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 14px;
	padding: 14px 16px;
	display: block;
	text-align: left;
}
.statbar .stat span {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 6px;
}
.statbar .stat strong {
	font-size: 22px;
	font-weight: 700;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

table.grid {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
	font-size: 13.5px;
}
table.grid th,
table.grid td {
	text-align: left;
	padding: 11px 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	vertical-align: middle;
}
table.grid th {
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
}
table.grid tr:last-child td { border-bottom: 0 }
table.grid tr:hover td { background: rgba(255, 255, 255, .02) }
table.grid code {
	font-family: "JetBrains Mono", monospace;
	font-size: 12.5px;
	color: var(--txt);
	letter-spacing: .04em;
}
table.grid td.right { text-align: right; white-space: nowrap }
.dim { color: var(--muted); font-size: 12px }

.mini {
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 11px;
	border-radius: 9px;
	cursor: pointer;
	color: var(--txt);
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	transition: background .18s, border-color .18s, transform .18s;
}
.mini:hover {
	background: var(--accent-soft);
	border-color: var(--accent-line);
	transform: translateY(-1px);
}
.mini.danger:hover {
	background: rgba(255, 107, 138, .14);
	border-color: rgba(255, 107, 138, .4);
	color: #ff8fa6;
}

.field-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 14px;
}
.field-row input,
.field-row select {
	flex: 1;
	min-width: 150px;
	padding: 11px 13px;
	border-radius: 11px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(0, 0, 0, .3);
	color: var(--txt);
	font-family: inherit;
	font-size: 14.5px;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.field-row input:focus,
.field-row select:focus {
	border-color: var(--accent-line);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.hint.bad { color: #ff6b8a }
.pill.ok {
	color: var(--ok);
	border-color: rgba(34, 209, 140, .4);
	background: rgba(34, 209, 140, .12);
}

@media (max-width: 640px) {
	table.grid { font-size: 12.5px }
	table.grid th, table.grid td { padding: 9px 6px }
	table.grid td.right { white-space: normal }
}

/* ============================================================
   v6 - dark starry sky behind the whole page (and the robot)
   ============================================================ */
#stars {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	display: block;
	pointer-events: none;
	/* fades itself in - never waits on the 3D scene to finish loading */
	animation: skyIn 2s ease .35s both;
}
@keyframes skyIn {
	from { opacity: 0 }
	to { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
	#stars { animation: none; opacity: 1 }
}

/* the robot sits straight on the sky - nothing painted behind it */
.stage,
.stage spline-viewer,
.stage canvas {
	background: transparent !important;
}