@import url("brand-tokens.css");
:root {
	--brand: var(--brand-ink);
	--brand-dark: #262626;
	--bg-1: var(--brand-canvas);
	--bg-2: var(--brand-white);
	--text-muted: var(--brand-slate);
	--border-soft: rgba(10, 10, 10, .12);
	--shadow-soft: 0 20px 60px rgba(10, 10, 10, 0.12);
	--radius-lg: 1.25rem;
	--radius-md: .9rem;
}

body {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(circle at top left, rgba(212, 237, 49, 0.22) 0%, transparent 34%),
		radial-gradient(circle at bottom right, rgba(10, 10, 10, 0.08) 0%, transparent 32%),
		linear-gradient(135deg, var(--bg-1), var(--bg-2));
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--brand-ink);
}

.hp-field {
	display: none;
	visibility: hidden;
}

.auth-wrapper {
	min-height: 100vh;
	padding: 2rem 1rem;
}

.auth-card {
	width: 100%;
	max-width: 620px;
	border: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: var(--shadow-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.auth-card.auth-card-compact {
	max-width: 460px;
}

.auth-card .card-body {
	padding: 2rem;
}

.brand-badge {
	width: 56px;
	height: 56px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brand), #262626);
	color: var(--brand-lime);
	font-size: 1.25rem;
	box-shadow: 0 10px 25px rgba(10, 10, 10, 0.28);
	margin-bottom: 1rem;
}

.auth-title {
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -.02em;
	margin-bottom: .35rem;
}

.auth-subtitle {
	color: var(--text-muted);
	font-size: .95rem;
	margin-bottom: 1.5rem;
}

.auth-card.auth-card-compact .auth-title {
	font-size: 1.65rem;
}

.nav-pills {
	background: rgba(148, 163, 184, 0.12);
	border-radius: .95rem;
	padding: .35rem;
	gap: .35rem;
}

.nav-pills .nav-link {
	border-radius: .75rem;
	font-weight: 600;
	color: #475569;
	padding: .7rem 1rem;
	transition: all .2s ease;
}

.nav-pills .nav-link.active {
	background: #ffffff;
	color: #111827;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.form-label {
	font-size: .84rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: .5rem;
}

.input-group-modern {
	position: relative;
}

.input-group-modern .form-control {
	height: 52px;
	border-radius: .9rem;
	border: 1px solid #e2e8f0;
	padding-left: 2.75rem;
	padding-right: 2.75rem;
	font-size: .95rem;
	background: rgba(255,255,255,.92);
	transition: all .2s ease;
	box-shadow: none;
}

.input-group-modern .form-control:focus {
	border-color: rgba(79, 70, 229, 0.45);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
	background: #fff;
}

.input-icon,
.input-action {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	color: #94a3b8;
}

.input-icon {
	left: .95rem;
	pointer-events: none;
}

.input-action {
	right: .9rem;
	border: 0;
	background: transparent;
	padding: 0;
	color: #64748b;
}

.input-action:hover {
	color: #0f172a;
}

.input-group-domain {
	display: flex;
	align-items: stretch;
	border-radius: .9rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	background: rgba(255,255,255,.92);
	transition: all .2s ease;
}

.input-group-domain:focus-within {
	border-color: rgba(79, 70, 229, 0.45);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
	background: #fff;
}

.input-group-domain .domain-prefix {
	display: inline-flex;
	align-items: center;
	padding: 0 1rem;
	color: #64748b;
	background: rgba(148, 163, 184, 0.08);
	border-right: 1px solid #e2e8f0;
	font-size: .92rem;
	white-space: nowrap;
}

.input-group-domain input {
	height: 52px;
	border: 0;
	outline: 0;
	box-shadow: none !important;
	background: transparent;
	padding: 0 1rem;
	width: 100%;
	font-size: .95rem;
}

.input-group-domain input::placeholder {
	color: #94a3b8;
}

.helper-text {
	color: var(--text-muted);
	font-size: .82rem;
	margin-top: .5rem;
}

.btn-modern {
	height: 52px;
	border-radius: .9rem;
	font-weight: 600;
	border: 0;
	transition: all .2s ease;
}

.btn-primary.btn-modern {
	background: linear-gradient(135deg, var(--brand), #262626);
	box-shadow: 0 12px 24px rgba(10, 10, 10, 0.22);
}

.btn-primary.btn-modern:hover {
	background: linear-gradient(135deg, var(--brand-dark), #1a1a1a);
	transform: translateY(-1px);
}

.btn-soft {
	border: 1px solid rgba(10, 10, 10, .16);
	color: var(--brand);
	background: rgba(10, 10, 10, .05);
	text-decoration: none;
}

.btn-soft:hover {
	background: rgba(10, 10, 10, .1);
	color: var(--brand-dark);
}

.btn-outline-primary.btn-modern {
	border: 1px solid rgba(79, 70, 229, .18);
	color: var(--brand);
	background: rgba(79, 70, 229, .05);
}

.btn-outline-primary.btn-modern:hover {
	background: rgba(79, 70, 229, .1);
	color: var(--brand-dark);
	border-color: rgba(79, 70, 229, .24);
}

.alert {
	border: 0;
	border-radius: .9rem;
	padding: .9rem 1rem;
	font-size: .9rem;
}

.alert-danger {
	background: #fef2f2;
	color: #991b1b;
}

.alert-success {
	background: #ecfdf5;
	color: #065f46;
}

/* Hide the old BS4 '×' when on a BS5 page */
.btn-close .bs4-only {
	display: none !important;
}

/* Style the BS5 close button to look correct */
.btn-close {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
	opacity: 0.5;
}

.btn-close:hover {
	opacity: 0.8;
}

.auth-footer {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.auth-footer p {
	margin-bottom: 0;
	color: var(--text-muted);
	font-size: .92rem;
}

.auth-footer a {
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}

.alert a,
.alert button.btn-link {
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}

.auth-footer a:hover,
.alert a:hover,
.alert button.btn-link:hover {
	color: var(--brand-dark);
	text-decoration: underline;
}

.helper-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	margin-top: -.25rem;
	margin-bottom: 1rem;
}

.helper-row .small-link {
	font-size: .85rem;
	text-decoration: none;
	color: var(--text-muted);
}

.helper-row .small-link:hover {
	color: var(--brand);
}

.success-actions {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.auth-verify-page .auth-card {
	background: rgba(255,255,255,.74);
}

.auth-verify-page .brand-badge {
	width: 60px;
	height: 60px;
	font-size: 1.3rem;
	box-shadow: 0 10px 24px rgba(79, 70, 229, 0.35);
	margin-bottom: 0;
}

.auth-verify-page .auth-title {
	font-size: 1.6rem;
}

.auth-verify-page .auth-subtitle {
	margin-bottom: 0;
}

.auth-verify-page .email-hint {
	margin-top: .4rem;
	font-size: .87rem;
	color: var(--text-muted);
}

.auth-verify-page .alert {
	border-radius: .95rem;
	padding: .95rem 1rem;
	font-size: .92rem;
}

.auth-verify-page .btn-modern {
	border-radius: .95rem;
}

.auth-verify-page .btn-light-modern {
	border: 1px solid rgba(79, 70, 229, .14);
	background: rgba(79, 70, 229, .05);
	color: var(--brand);
}

.auth-verify-page .btn-light-modern:hover {
	background: rgba(79, 70, 229, .1);
	color: var(--brand-dark);
}

.auth-verify-page .trust-box {
	background: rgba(248, 250, 252, .9);
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: .95rem 1rem;
}

.auth-verify-page .helper-text {
	font-size: .88rem;
}

.auth-verify-page .otp-group {
	display: flex;
	gap: .55rem;
	justify-content: center;
}

.auth-verify-page .otp-input {
	width: 54px;
	height: 60px;
	border-radius: 1rem;
	border: 1px solid #e2e8f0;
	background: rgba(255,255,255,.94);
	text-align: center;
	font-size: 1.35rem;
	font-weight: 700;
	color: #0f172a;
	transition: all .2s ease;
	box-shadow: none;
}

.auth-verify-page .otp-input:focus {
	outline: none;
	border-color: rgba(79, 70, 229, .5);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, .12);
	transform: translateY(-1px);
}

.auth-verify-page .footer-links a {
	color: var(--brand);
	text-decoration: none;
	font-weight: 600;
}

.auth-verify-page .footer-links a:hover {
	color: var(--brand-dark);
	text-decoration: underline;
}

.auth-activate-page .auth-card {
	max-width: 520px;
}

.auth-activate-page .auth-card .card-body {
	padding: 2.25rem;
}

.auth-activate-page .auth-title {
	font-size: 1.75rem;
	margin-bottom: .5rem;
}

.auth-activate-page .auth-subtitle {
	font-size: .98rem;
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

.auth-activate-page .btn-modern {
	min-height: 52px;
	height: auto;
	padding: .85rem 1.25rem;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
}

.auth-activate-page .btn-soft {
	border: 1px solid rgba(79, 70, 229, .14);
}

.auth-activate-page .btn-soft:hover {
	transform: translateY(-1px);
}

.auth-activate-page .status-badge {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 1rem;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
}

.auth-activate-page .status-badge.success {
	background: linear-gradient(135deg, #22c55e, #16a34a);
}

.auth-activate-page .status-badge.error {
	background: linear-gradient(135deg, #ef4444, #dc2626);
}

.auth-activate-page .actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

.auth-activate-page .support-note {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(148, 163, 184, 0.18);
	color: var(--text-muted);
	font-size: .9rem;
}

.auth-activate-page .support-note a {
	color: var(--brand);
	text-decoration: none;
	font-weight: 600;
}

.auth-activate-page .support-note a:hover {
	color: var(--brand-dark);
	text-decoration: underline;
}

@media (max-width: 576px) {
	.auth-card .card-body {
		padding: 1.35rem;
	}

	.auth-title {
		font-size: 1.45rem;
	}

	.auth-card.auth-card-compact .auth-title {
		font-size: 1.4rem;
	}

	.success-actions {
		flex-direction: column;
	}

	.success-actions > * {
		width: 100%;
	}

	.auth-verify-page .otp-group {
		gap: .4rem;
	}

	.auth-verify-page .otp-input {
		width: 44px;
		height: 54px;
		font-size: 1.15rem;
	}

	.auth-activate-page .auth-card .card-body {
		padding: 1.5rem;
	}

	.auth-activate-page .auth-title {
		font-size: 1.45rem;
	}

	.auth-activate-page .actions {
		flex-direction: column;
	}

	.auth-activate-page .actions > a {
		width: 100%;
	}
}