.mvr-auth-wrapper {
	--mvr-primary: #1d4e89;
	--mvr-primary-dark: #143a66;
	--mvr-accent: #0f8a8a;
	--mvr-border: #d7dde3;
	--mvr-error: #c0392b;
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.mvr-auth-wrapper * { box-sizing: border-box; }

@media (max-width: 720px) {
	.mvr-auth-wrapper { grid-template-columns: 1fr; }
}

.mvr-auth-brand {
	background: linear-gradient(160deg, var(--mvr-accent), var(--mvr-primary-dark));
	color: #fff;
	display: flex;
	align-items: center;
	padding: 40px 32px;
}
.mvr-auth-brand-eyebrow {
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: 13px;
	font-weight: 700;
	opacity: .85;
	margin: 0 0 10px;
}
.mvr-auth-brand h2 { font-size: 26px; margin: 0 0 14px; line-height: 1.25; }
.mvr-auth-brand p { opacity: .9; line-height: 1.6; margin: 0; }

.mvr-auth-panel { background: #fff; padding: 36px 36px 28px; }

.mvr-auth-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--mvr-border); }
.mvr-auth-tab {
	background: none;
	border: none;
	padding: 10px 4px 12px;
	margin-right: 20px;
	font-size: 15px;
	font-weight: 600;
	color: #8a97a3;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
}
.mvr-auth-tab.is-active { color: var(--mvr-primary); border-bottom-color: var(--mvr-primary); }

.mvr-req { color: var(--mvr-error); }

.mvr-field { margin-bottom: 16px; }
.mvr-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #334155; }
.mvr-field input, .mvr-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--mvr-border);
	border-radius: 6px;
	font-size: 14px;
}
.mvr-field input:focus, .mvr-field select:focus {
	outline: none;
	border-color: var(--mvr-primary);
	box-shadow: 0 0 0 3px rgba(29, 78, 137, .12);
}

.mvr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 480px) { .mvr-grid { grid-template-columns: 1fr; } }
.mvr-span-2 { grid-column: span 2; }
@media (max-width: 480px) { .mvr-span-2 { grid-column: span 1; } }

.mvr-password-wrap { position: relative; display: flex; }
.mvr-password-wrap input { padding-right: 60px; }
.mvr-password-toggle {
	position: absolute;
	right: 6px;
	top: 6px;
	bottom: 6px;
	background: #f1f5f9;
	border: none;
	border-radius: 4px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--mvr-primary);
	cursor: pointer;
}

.mvr-otp-row { display: flex; gap: 8px; }
.mvr-otp-row input { flex: 1; }
.mvr-btn-nowrap { white-space: nowrap; }

.mvr-math-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mvr-math-check label { width: 100%; margin-bottom: 0; }
.mvr-math-check input[type="number"] { width: 90px; }
.mvr-link-btn { background: none; border: none; color: var(--mvr-primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }

.mvr-hint { font-size: 12px; color: #7a8794; margin: -4px 0 16px; line-height: 1.5; }

.mvr-btn {
	padding: 11px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
}
.mvr-btn-primary { background: var(--mvr-primary); color: #fff; }
.mvr-btn-primary:hover { background: var(--mvr-primary-dark); }
.mvr-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.mvr-btn-secondary { background: #fff; color: var(--mvr-primary); border-color: var(--mvr-primary); }
.mvr-btn-secondary:disabled { opacity: .6; cursor: not-allowed; }
.mvr-btn-block { width: 100%; margin-top: 6px; }

.mvr-auth-switch { text-align: center; margin-top: 20px; font-size: 14px; color: #52606d; }

.mvr-alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.mvr-alert-error { background: #fdecea; border: 1px solid #f5c6c2; color: var(--mvr-error); }
.mvr-alert-success { background: #eaf7ef; border: 1px solid #bfe6cc; color: #1a7e34; }

.mvr-honeypot { position: absolute; left: -9999px; top: -9999px; }