/* Wegemanager auth — Slack/Discord-style */



*,

*::before,

*::after {

	box-sizing: border-box;

}



html,

body {

	margin: 0;

	min-height: 100%;

}



:root {

	--rm-color-accent: #5865f2;

	--rm-color-accent-hover: #4752c4;

	--rm-input-ring: inset 0 0 0 1px var(--rm-input-border);

	--rm-input-ring-focus: 0 0 0 2px rgba(88, 101, 242, 0.35), inset 0 0 0 1px var(--rm-color-accent);

	--rm-input-ring-transition: box-shadow 0.15s ease, background 0.15s ease;

	--rm-input-bg-gradient-focus: linear-gradient(

		180deg,

		color-mix(in srgb, var(--rm-input-bg) 97%, #000) 0%,

		color-mix(in srgb, var(--rm-input-bg) 91%, var(--rm-color-accent)) 52%,

		color-mix(in srgb, color-mix(in srgb, var(--rm-input-bg) 97%, #fff) 86%, var(--rm-color-accent)) 100%

	);

	--rm-auth-card-radius: 16px;

	--rm-auth-control-radius: 12px;

}



html.rm-theme-dark {

	--rm-color-rail: #1e1f22;

	--rm-color-panel: #2b2d31;

	--rm-heading-color: #f2f3f5;

	--rm-color-text: #dbdee1;

	--rm-color-muted: #b5bac1;

	--rm-color-subtle: #949ba4;

	--rm-color-danger: #f38686;

	--rm-color-danger-bg: rgba(237, 66, 69, 0.15);

	--rm-input-bg: #1e1f22;

	--rm-input-border: rgba(255, 255, 255, 0.14);

	--rm-link-color: #5865f2;

	--rm-link-hover-color: #aeb6ff;

	--rm-checkbox-unchecked-bg: rgba(255, 255, 255, 0.09);

	--rm-checkbox-unchecked-border: rgba(255, 255, 255, 0.34);

	--rm-checkbox-unchecked-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.24);

	--rm-checkbox-unchecked-hover-bg: rgba(255, 255, 255, 0.13);

	--rm-auth-card-shadow:

		0 0 0 1px rgba(255, 255, 255, 0.04),

		0 16px 40px rgba(0, 0, 0, 0.32),

		0 4px 12px rgba(0, 0, 0, 0.2);

	--rm-auth-overlay-bg: rgba(30, 31, 34, 0.82);

	--rm-auth-logo-outline: rgba(255, 255, 255, 0.1);

	--rm-auth-details-divider: rgba(255, 255, 255, 0.06);

	--rm-meta-theme-color: #1e1f22;

}



html.rm-theme-light {

	--rm-color-rail: #e3e5e8;

	--rm-color-panel: #f2f3f5;

	--rm-heading-color: #111214;

	--rm-color-text: #2e3338;

	--rm-color-muted: #5c6370;

	--rm-color-subtle: #949ba4;

	--rm-color-danger: #c93c3f;

	--rm-color-danger-bg: rgba(237, 66, 69, 0.1);

	--rm-input-bg: #fff;

	--rm-input-border: rgba(0, 0, 0, 0.12);

	--rm-link-color: #4752c4;

	--rm-link-hover-color: #3c45a5;

	--rm-checkbox-unchecked-bg: #fff;

	--rm-checkbox-unchecked-border: rgba(0, 0, 0, 0.24);

	--rm-checkbox-unchecked-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(0, 0, 0, 0.08);

	--rm-checkbox-unchecked-hover-bg: #fff;

	--rm-auth-card-shadow:

		0 0 0 1px rgba(0, 0, 0, 0.04),

		0 10px 40px rgba(0, 0, 0, 0.12),

		0 4px 12px rgba(0, 0, 0, 0.06);

	--rm-auth-overlay-bg: rgba(242, 243, 245, 0.88);

	--rm-auth-logo-outline: rgba(0, 0, 0, 0.1);

	--rm-auth-details-divider: rgba(0, 0, 0, 0.06);

	--rm-meta-theme-color: #e3e5e8;

}



html.rm-theme-auto {

	--rm-color-rail: #e3e5e8;

	--rm-color-panel: #f2f3f5;

	--rm-heading-color: #111214;

	--rm-color-text: #2e3338;

	--rm-color-muted: #5c6370;

	--rm-color-subtle: #949ba4;

	--rm-color-danger: #c93c3f;

	--rm-color-danger-bg: rgba(237, 66, 69, 0.1);

	--rm-input-bg: #fff;

	--rm-input-border: rgba(0, 0, 0, 0.12);

	--rm-link-color: #4752c4;

	--rm-link-hover-color: #3c45a5;

	--rm-checkbox-unchecked-bg: #fff;

	--rm-checkbox-unchecked-border: rgba(0, 0, 0, 0.24);

	--rm-checkbox-unchecked-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(0, 0, 0, 0.08);

	--rm-checkbox-unchecked-hover-bg: #fff;

	--rm-auth-card-shadow:

		0 0 0 1px rgba(0, 0, 0, 0.04),

		0 10px 40px rgba(0, 0, 0, 0.12),

		0 4px 12px rgba(0, 0, 0, 0.06);

	--rm-auth-overlay-bg: rgba(242, 243, 245, 0.88);

	--rm-auth-logo-outline: rgba(0, 0, 0, 0.1);

	--rm-auth-details-divider: rgba(0, 0, 0, 0.06);

	--rm-meta-theme-color: #e3e5e8;

}



@media (prefers-color-scheme: dark) {

	html.rm-theme-auto {

		--rm-color-rail: #1e1f22;

		--rm-color-panel: #2b2d31;

		--rm-heading-color: #f2f3f5;

		--rm-color-text: #dbdee1;

		--rm-color-muted: #b5bac1;

		--rm-color-subtle: #949ba4;

		--rm-color-danger: #f38686;

		--rm-color-danger-bg: rgba(237, 66, 69, 0.15);

		--rm-input-bg: #1e1f22;

		--rm-input-border: rgba(255, 255, 255, 0.14);

		--rm-link-color: #5865f2;

		--rm-link-hover-color: #aeb6ff;

		--rm-checkbox-unchecked-bg: rgba(255, 255, 255, 0.09);

		--rm-checkbox-unchecked-border: rgba(255, 255, 255, 0.34);

		--rm-checkbox-unchecked-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.24);

		--rm-checkbox-unchecked-hover-bg: rgba(255, 255, 255, 0.13);

		--rm-auth-card-shadow:

			0 0 0 1px rgba(255, 255, 255, 0.04),

			0 16px 40px rgba(0, 0, 0, 0.32),

			0 4px 12px rgba(0, 0, 0, 0.2);

		--rm-auth-overlay-bg: rgba(30, 31, 34, 0.82);

		--rm-auth-logo-outline: rgba(255, 255, 255, 0.1);

		--rm-auth-details-divider: rgba(255, 255, 255, 0.06);

		--rm-meta-theme-color: #1e1f22;

	}

}



html:not([class*="rm-theme-"]) {

	--rm-color-rail: #e3e5e8;

	--rm-color-panel: #f2f3f5;

	--rm-heading-color: #111214;

	--rm-color-text: #2e3338;

	--rm-color-muted: #5c6370;

	--rm-color-subtle: #949ba4;

	--rm-color-danger: #c93c3f;

	--rm-color-danger-bg: rgba(237, 66, 69, 0.1);

	--rm-input-bg: #fff;

	--rm-input-border: rgba(0, 0, 0, 0.12);

	--rm-link-color: #4752c4;

	--rm-link-hover-color: #3c45a5;

	--rm-checkbox-unchecked-bg: #fff;

	--rm-checkbox-unchecked-border: rgba(0, 0, 0, 0.24);

	--rm-checkbox-unchecked-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 2px rgba(0, 0, 0, 0.08);

	--rm-checkbox-unchecked-hover-bg: #fff;

	--rm-auth-card-shadow:

		0 0 0 1px rgba(0, 0, 0, 0.04),

		0 10px 40px rgba(0, 0, 0, 0.12),

		0 4px 12px rgba(0, 0, 0, 0.06);

	--rm-auth-overlay-bg: rgba(242, 243, 245, 0.88);

	--rm-auth-logo-outline: rgba(0, 0, 0, 0.1);

	--rm-auth-details-divider: rgba(0, 0, 0, 0.06);

	--rm-meta-theme-color: #e3e5e8;

}



body.rm-auth-page {

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: 100vh;

	min-height: 100dvh;

	padding: 1.25rem;

	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	font-size: 15px;

	line-height: 1.5;

	color: var(--rm-color-text);

	background: var(--rm-color-rail);

	-webkit-font-smoothing: antialiased;

}



.rm-auth-wrap {

	width: 100%;

	max-width: 352px;

	margin: 0;

}



.rm-auth-stack {

	position: relative;

}



.rm-auth-panel {

	display: none;

}



.rm-auth-panel.is-active {

	display: block;

}



.rm-auth-card {

	position: relative;

	background: var(--rm-color-panel);

	border-radius: var(--rm-auth-card-radius);

	box-shadow: var(--rm-auth-card-shadow);

	padding: 1.5rem 1.25rem 1.25rem;

}



.rm-auth-brand {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 0.5rem;

	margin-bottom: 1.25rem;

	text-align: center;

}



.rm-auth-logo {

	display: block;

	width: 48px;

	height: 48px;

	flex-shrink: 0;

}



.rm-auth-logo--on-light {

	display: none;

}



html.rm-theme-light .rm-auth-logo--on-light {

	display: block;

}



html.rm-theme-light .rm-auth-logo--on-dark {

	display: none;

}



@media (prefers-color-scheme: light) {

	html.rm-theme-auto .rm-auth-logo--on-light {

		display: block;

	}



	html.rm-theme-auto .rm-auth-logo--on-dark {

		display: none;

	}

}



@media (prefers-color-scheme: dark) {

	html.rm-theme-auto .rm-auth-logo--on-light {

		display: none;

	}



	html.rm-theme-auto .rm-auth-logo--on-dark {

		display: block;

	}

}



.rm-auth-title {

	margin: 0;

	font-size: 1.35rem;

	font-weight: 700;

	line-height: 1.25;

	color: var(--rm-heading-color);

	text-wrap: balance;

}



.rm-auth-subtitle {

	margin: 0;

	max-width: 30ch;

	font-size: 0.875rem;

	line-height: 1.45;

	color: var(--rm-color-subtle);

	text-wrap: pretty;

}



.rm-auth-group {

	margin-bottom: 1rem;

}



.rm-auth-group-label {

	display: block;

	margin-bottom: 8px;

	font-size: 11px;

	font-weight: 600;

	letter-spacing: 0.05em;

	text-transform: uppercase;

	color: var(--rm-color-subtle);

	text-wrap: balance;

}



.rm-auth-page .form-control {

	display: block;

	width: 100%;

	padding: 10px 14px;

	border: 0;

	border-radius: 9999px;

	background: var(--rm-input-bg);

	color: var(--rm-color-text);

	box-shadow: var(--rm-input-ring);

	transition: var(--rm-input-ring-transition), color 0.15s ease;

}



.rm-auth-page .form-control::placeholder {

	color: var(--rm-color-subtle);

	opacity: 1;

}



.rm-auth-page .form-control:focus,

.rm-auth-page .form-control:focus-visible {

	outline: none;

	background: var(--rm-input-bg-gradient-focus);

	color: var(--rm-heading-color);

	box-shadow: var(--rm-input-ring-focus);

}



.rm-auth-remember.form-check {

	display: flex;

	align-items: center;

	gap: 8px;

	margin: 0 0 1.125rem;

	padding: 0;

	min-height: auto;

}



.rm-auth-page .form-check-input[type="checkbox"] {

	appearance: none;

	-webkit-appearance: none;

	width: 1.125rem;

	height: 1.125rem;

	margin: 0;

	flex-shrink: 0;

	border-radius: 4px;

	background-color: var(--rm-checkbox-unchecked-bg);

	border: 1px solid var(--rm-checkbox-unchecked-border);

	box-shadow: var(--rm-checkbox-unchecked-shadow);

	cursor: pointer;

	transition-property: background-color, border-color, box-shadow, transform;

	transition-duration: 0.15s;

	transition-timing-function: ease;

}



@media (hover: hover) and (pointer: fine) {

	.rm-auth-page .form-check-input[type="checkbox"]:hover:not(:checked) {

		background-color: var(--rm-checkbox-unchecked-hover-bg);

		border-color: color-mix(in srgb, var(--rm-checkbox-unchecked-border) 88%, #fff);

	}

}



.rm-auth-page .form-check-input[type="checkbox"]:active {

	transform: scale(0.96);

}



.rm-auth-page .form-check-input[type="checkbox"]:checked {

	background-color: var(--rm-color-accent);

	border-color: var(--rm-color-accent);

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");

	background-repeat: no-repeat;

	background-position: center;

	background-size: 12px 12px;

}



.rm-auth-page .form-check-input[type="checkbox"]:focus,

.rm-auth-page .form-check-input[type="checkbox"]:focus-visible {

	box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.35);

	border-color: rgba(88, 101, 242, 0.85);

	outline: none;

}



.rm-auth-page .form-check-label {

	margin: 0;

	font-size: 13px;

	line-height: 1.4;

	color: var(--rm-color-text);

	text-wrap: pretty;

	cursor: pointer;

}



.rm-auth-page .btn.btn-primary.rm-auth-submit {

	display: block;

	width: 100%;

	margin: 0;

	padding: 0.7rem 1rem;

	border: 1px solid var(--rm-color-accent);

	border-radius: var(--rm-auth-control-radius);

	background-color: var(--rm-color-accent);

	color: #fff;

	font-size: 0.9375rem;

	font-weight: 600;

	cursor: pointer;

	box-shadow:

		0 1px 2px rgba(0, 0, 0, 0.18),

		inset 0 1px 0 rgba(255, 255, 255, 0.12);

	transition-property: background-color, border-color, color, box-shadow, transform;

	transition-duration: 0.15s;

	transition-timing-function: ease;

}



.rm-auth-page .btn.btn-primary.rm-auth-submit:hover,

.rm-auth-page .btn.btn-primary.rm-auth-submit:focus-visible {

	background-color: color-mix(in srgb, var(--rm-color-accent) 90%, #fff);

	border-color: color-mix(in srgb, var(--rm-color-accent) 90%, #fff);

	color: #fff;

	outline: none;

	box-shadow:

		0 0 0 2px rgba(88, 101, 242, 0.35),

		0 1px 2px rgba(0, 0, 0, 0.18),

		inset 0 1px 0 rgba(255, 255, 255, 0.12);

}



.rm-auth-page .btn.btn-primary.rm-auth-submit:active {

	transform: scale(0.96);

	background-color: color-mix(in srgb, var(--rm-color-accent) 82%, #000);

	border-color: color-mix(in srgb, var(--rm-color-accent) 82%, #000);

}



.rm-auth-submit--compact {

	margin-top: 0.75rem;

}



.rm-auth-submit:disabled {

	opacity: 0.65;

	cursor: not-allowed;

	transform: none;

}



.rm-auth-links {

	margin: 0.75rem 0 0;

	text-align: center;

}



.rm-auth-link {

	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 40px;

	min-height: 40px;

	margin: 0;

	padding: 0 0.5rem;

	border: 0;

	background: transparent;

	color: var(--rm-link-color);

	font-size: 0.875rem;

	font-weight: 500;

	text-decoration: none;

	cursor: pointer;

	transition-property: color;

	transition-duration: 0.15s;

	transition-timing-function: ease;

}



.rm-auth-link:hover {

	color: var(--rm-link-hover-color);

	text-decoration: underline;

}



.rm-auth-link:focus,

.rm-auth-link:focus-visible {

	outline: none;

	text-decoration: underline;

}



.rm-auth-details {

	margin: 1rem 0 0;

	padding-top: 0.75rem;

	box-shadow: inset 0 1px 0 var(--rm-auth-details-divider);

}



.rm-auth-details summary {

	cursor: pointer;

	font-size: 0.8125rem;

	color: var(--rm-color-subtle);

	list-style-position: inside;

}



.rm-auth-details[open] summary {

	margin-bottom: 0.75rem;

}



.rm-auth-hint,

.rm-auth-page .form-text {

	margin: 0.5rem 0 0;

	font-size: 0.8125rem;

	color: var(--rm-color-subtle);

	text-wrap: pretty;

}



.rm-auth-alert {

	margin-bottom: 1rem;

	padding: 0.75rem 0.875rem;

	border-radius: var(--rm-auth-control-radius);

	font-size: 0.875rem;

	line-height: 1.45;

	text-wrap: pretty;

}



.rm-auth-alert-success {

	background: rgba(59, 165, 93, 0.14);

	color: #9ae6b0;

	box-shadow:

		0 0 0 1px rgba(59, 165, 93, 0.22),

		0 4px 12px rgba(0, 0, 0, 0.12);

}



.rm-auth-alert-danger {

	background: var(--rm-color-danger-bg);

	color: var(--rm-color-danger);

	box-shadow:

		0 0 0 1px rgba(237, 66, 69, 0.22),

		0 4px 12px rgba(0, 0, 0, 0.12);

}



.rm-auth-overlay {

	position: absolute;

	inset: 0;

	align-items: center;

	justify-content: center;

	padding: 1rem;

	border-radius: var(--rm-auth-card-radius);

	background: var(--rm-auth-overlay-bg);

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

}



.rm-auth-overlay[hidden] {

	display: none !important;

}



.rm-auth-overlay:not([hidden]) {

	display: flex;

}



.rm-auth-overlay-card {

	width: 100%;

	max-width: 320px;

	padding: 1rem;

	text-align: center;

}



.rm-auth-overlay-title {

	margin: 0 0 0.5rem;

	font-size: 1rem;

	font-weight: 700;

	color: var(--rm-heading-color);

}



.rm-auth-overlay-state p {

	margin: 0;

	font-size: 0.875rem;

	color: var(--rm-color-muted);

	text-wrap: pretty;

}



.rm-auth-overlay-state[data-state="loading"] {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 10px;

}



.rm-auth-overlay-state .loading-progress-status {

	font-size: 12px;

	line-height: 1.35;

	color: var(--rm-loading-text-muted);

	white-space: nowrap;

}



@media (max-width: 480px) {

	.rm-auth-overlay-state .loading-progress-status {

		visibility: visible;

	}

}



@media (max-width: 480px) {

	.rm-auth-card {

		padding: 1.375rem 1rem 1.125rem;

	}

}