:root {
	--ond-primary: #7f11f4;
	--ond-primary-dark: #560fb2;
	--ond-secondary: #11f558;
	--ond-dark: #290756;
	--ond-dark-contrast: #f3edff;
	--ond-light-bg: #f7f5fb;
	--ond-text-dark: #1f1f1f;
	--ond-text-muted: #6f6f6f;
}

body {
	font-family: "Inter", Arial, sans-serif;
	color: var(--ond-text-dark);
	background-color: var(--ond-light-bg);
}

.auth-layout {
	background-color: var(--ond-dark);
	color: var(--ond-dark-contrast);
}

.auth-header .auth-logo {
	max-width: 200px;
}

.auth-card {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(6px);
	box-shadow: 0 16px 40px rgba(17, 0, 35, 0.45);
}

.auth-card .form-control, .auth-card .form-select {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--ond-dark-contrast);
}

.auth-card .form-control:focus, .auth-card .form-select:focus {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(127, 17, 244, 0.65);
	color: var(--ond-dark-contrast);
	box-shadow: 0 0 0 0.25rem rgba(127, 17, 244, 0.35);
}

.auth-card .form-control::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.auth-card .btn-primary {
	background-color: var(--ond-primary);
	border-color: var(--ond-primary);
}

.auth-card .btn-primary:hover, .auth-card .btn-primary:focus {
	background-color: var(--ond-primary-dark);
	border-color: var(--ond-primary-dark);
}

.btn-ond-success {
	background-color: #0d8f39;
	border-color: #0d8f39;
	color: #ffffff;
}

.btn-ond-success:hover, .btn-ond-success:focus {
	background-color: #0a6c2b;
	border-color: #0a6c2b;
	color: #ffffff;
}

.user-header {
	background-color: #ffffff;
}

.user-header .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.content-page {
	background-color: var(--ond-light-bg);
	color: var(--ond-text-dark);
}

.content-card {
	background-color: #ffffff;
	border-radius: 1.5rem;
	box-shadow: 0 24px 60px rgba(41, 7, 86, 0.08);
}

.content-card h1, .content-card h2 {
	color: var(--ond-primary);
}

.content-card a {
	color: var(--ond-primary);
}

.content-card a:hover, .content-card a:focus {
	color: var(--ond-primary-dark);
}