* {
	box-sizing: border-box;
}

/* ── Web font (UX-D7): self-hosted Inter ──
   Drop the variable WOFF2 at /charge/assets/fonts/. Until present, the
   src 404s silently and the system fallback stack in --vp-font is used. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/charge/assets/fonts/Inter-Variable.woff2") format("woff2");
}

:root {
	color-scheme: dark light;

	/* Brand accents — shared by both themes */
	--vp-accent: #4fd1ff;
	--vp-accent-2: #7c5cff;
	--vp-on-accent: #08111f;
	--vp-focus: rgba(79, 209, 255, 0.55);

	/* Semantic tokens — DARK (default) */
	--vp-bg: #08111f;
	--vp-glow-1: rgba(124, 92, 255, 0.18);
	--vp-glow-2: rgba(79, 209, 255, 0.16);
	--vp-surface: rgba(16, 27, 45, 0.88);
	--vp-surface-2: rgba(16, 27, 45, 0.6);
	--vp-surface-3: rgba(255, 255, 255, 0.03);
	--vp-border: rgba(255, 255, 255, 0.08);
	--vp-text: #edf2ff;
	--vp-muted: #9cb0cf;
	--vp-input-bg: rgba(255, 255, 255, 0.04);
	--vp-input-border: rgba(255, 255, 255, 0.09);
	--vp-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
	--vp-footer-bg: rgba(2, 6, 23, 0.9);
	--vp-success-bg: rgba(44, 182, 125, 0.15);
	--vp-success-fg: #7df0ba;
	--vp-warn-bg: rgba(255, 193, 7, 0.14);
	--vp-warn-fg: #ffd166;
	--vp-danger-bg: rgba(239, 83, 80, 0.14);
	--vp-danger-fg: #ff9c9c;

	/* Scale */
	--vp-radius: 14px;
	--vp-radius-lg: 24px;
	--vp-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
		sans-serif;

	/* Legacy aliases (back-compat with pre-2026-06 rules) */
	--bg: var(--vp-bg);
	--panel: var(--vp-surface);
	--line: var(--vp-border);
	--text: var(--vp-text);
	--muted: var(--vp-muted);
	--accent: var(--vp-accent);
	--accent-2: var(--vp-accent-2);
}

/* LIGHT — auto when the OS prefers light and the user has not forced dark */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--vp-bg: #eef2f8;
		--vp-glow-1: rgba(124, 92, 255, 0.1);
		--vp-glow-2: rgba(79, 209, 255, 0.12);
		--vp-surface: #ffffff;
		--vp-surface-2: #f4f7fb;
		--vp-surface-3: rgba(8, 17, 31, 0.03);
		--vp-border: rgba(8, 17, 31, 0.1);
		--vp-text: #0c1726;
		--vp-muted: #51607a;
		--vp-input-bg: #ffffff;
		--vp-input-border: rgba(8, 17, 31, 0.16);
		--vp-shadow: 0 16px 40px rgba(8, 17, 31, 0.1);
		--vp-footer-bg: rgba(238, 242, 248, 0.92);
		--vp-success-fg: #1c9d63;
		--vp-warn-fg: #9a6b00;
		--vp-danger-fg: #c0392b;
	}
}

/* LIGHT — manual override */
:root[data-theme="light"] {
	--vp-bg: #eef2f8;
	--vp-glow-1: rgba(124, 92, 255, 0.1);
	--vp-glow-2: rgba(79, 209, 255, 0.12);
	--vp-surface: #ffffff;
	--vp-surface-2: #f4f7fb;
	--vp-surface-3: rgba(8, 17, 31, 0.03);
	--vp-border: rgba(8, 17, 31, 0.1);
	--vp-text: #0c1726;
	--vp-muted: #51607a;
	--vp-input-bg: #ffffff;
	--vp-input-border: rgba(8, 17, 31, 0.16);
	--vp-shadow: 0 16px 40px rgba(8, 17, 31, 0.1);
	--vp-footer-bg: rgba(238, 242, 248, 0.92);
	--vp-success-fg: #1c9d63;
	--vp-warn-fg: #9a6b00;
	--vp-danger-fg: #c0392b;
}

/* Accessibility */
:focus-visible {
	outline: 2px solid var(--vp-focus);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}
body {
	margin: 0;
	font-family: var(--vp-font);
	color: var(--vp-text);
	background:
		radial-gradient(circle at top right, var(--vp-glow-1), transparent 22%),
		radial-gradient(circle at left top, var(--vp-glow-2), transparent 28%),
		var(--vp-bg);
}
.glass {
	background: var(--vp-surface);
	border: 1px solid var(--vp-border);
	box-shadow: var(--vp-shadow);
	backdrop-filter: blur(10px);
}

.login-body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}
.login-shell {
	width: 100%;
	max-width: 980px;
}
.login-card {
	border-radius: 28px;
	padding: 34px;
}
.login-card.login-vertical {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	max-width: 390px;
	margin: 0 auto;
	padding: 40px 30px;
	grid-template-columns: unset;
}
.login-title-wrap {
	width: 100%;
}
.login-logo {
	width: 180px;
	height: 180px;
	object-fit: contain;
	filter: drop-shadow(0 12px 30px rgba(79, 209, 255, 0.15));
	margin-bottom: 12px;
}
.eyebrow {
	margin: 0 0 6px;
	color: var(--accent);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
h1,
h2 {
	margin: 0;
}
.muted {
	color: var(--muted);
}
.login-desc {
	margin: 8px 0 20px;
}
.login-form,
.knowledge-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.login-card.login-vertical .login-form {
	width: 100%;
	margin-top: 10px;
}
label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}
input,
textarea,
button {
	font: inherit;
}
input,
textarea {
	width: 100%;
	border: 1px solid var(--vp-input-border);
	background: var(--vp-input-bg);
	color: var(--vp-text);
	border-radius: var(--vp-radius);
	padding: 14px 16px;
	outline: none;
}
input:focus,
textarea:focus {
	border-color: var(--vp-focus);
	box-shadow: 0 0 0 3px rgba(79, 209, 255, 0.18);
}
button {
	border: none;
	cursor: pointer;
	transition: 0.2s ease;
}
.btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #08111f;
	font-weight: 700;
	border-radius: 14px;
	padding: 14px 18px;
}
.btn-secondary {
	background: rgba(255, 255, 255, 0.06);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 10px 14px;
}
.form-msg {
	min-height: 18px;
	margin: 0;
	color: var(--accent);
	font-size: 13px;
}