/* ════════════════════════════════════════════════════════════════════════
   Login page — centred Rodin card
   ════════════════════════════════════════════════════════════════════════ */

.an-login {
	position: relative;
	background: var(--an-bg-secondary);
	min-height: calc(100vh - 72px);
	padding: 60px 20px 80px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.an-login::before {
	content: '';
	position: absolute;
	top: -220px; right: -220px;
	width: 560px; height: 560px;
	background: radial-gradient(circle, rgba(225, 29, 46, 0.08) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.an-login::after {
	content: '';
	position: absolute;
	bottom: -220px; left: -220px;
	width: 560px; height: 560px;
	background: radial-gradient(circle, rgba(225, 29, 46, 0.05) 0%, transparent 60%);
	pointer-events: none;
	z-index: 0;
}
@media (max-width: 640px) { .an-login { padding: 32px 16px 48px; } }

.an-login__shell {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.an-login__card {
	background: var(--an-bg-elevated);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-lg);
	padding: 40px 36px;
}
@media (max-width: 520px) { .an-login__card { padding: 28px 20px; } }

/* ─── Head (logo + headline) ─────────────────────────────── */
.an-login__head {
	text-align: center;
	margin-bottom: 24px;
}
.an-login__logo {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 18px;
	text-decoration: none;
}
.an-login__logo .an-logo__main,
.an-login__logo .an-logo__sub {
	color: var(--an-heading) !important;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
}
.an-login__logo .an-logo__sub {
	color: var(--an-accent) !important;
}
.an-login__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 600;
	color: var(--an-heading);
	letter-spacing: -0.015em;
	margin: 0 0 6px;
}
.an-login__sub {
	font-size: 14.5px;
	color: var(--an-text-muted);
	margin: 0;
}

/* ─── Messages (error / ok) ──────────────────────────────── */
.an-login__msg {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--an-radius-sm);
	font-size: 13.5px;
	line-height: 1.45;
	margin: 0 0 16px;
}
.an-login__msg span[aria-hidden] {
	font-size: 16px;
	flex-shrink: 0;
}
.an-login__msg--error {
	background: rgba(225, 29, 46, 0.08);
	color: #B8121F;
	border: 1px solid rgba(225, 29, 46, 0.22);
}
.an-login__msg--ok {
	background: rgba(31, 143, 78, 0.08);
	color: #1F8F4E;
	border: 1px solid rgba(31, 143, 78, 0.22);
}

/* ─── Form ───────────────────────────────────────────────── */
.an-login__form .an-field { margin-bottom: 14px; }
.an-login__form .an-field label {
	font-size: 13px;
	font-weight: 500;
	color: var(--an-heading);
	margin-bottom: 6px;
	display: block;
}
.an-login__form .an-field input[type="text"],
.an-login__form .an-field input[type="password"],
.an-login__form .an-field input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 14.5px;
	color: var(--an-text);
	background: var(--an-bg-primary);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-sm);
	transition: border-color var(--an-trans-base), box-shadow var(--an-trans-base);
}
.an-login__form input:focus {
	outline: none;
	border-color: var(--an-accent);
	box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);
}

/* Label + "Forgot password?" on same row */
.an-field__label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 6px;
}
.an-field__label-row label { margin-bottom: 0 !important; }
.an-login__forgot {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--an-accent);
	text-decoration: none;
}
.an-login__forgot:hover { text-decoration: underline; color: var(--an-link-hover); }

/* Remember-me checkbox */
.an-login__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--an-text);
	cursor: pointer;
	margin: 6px 0 18px;
	user-select: none;
}
.an-login__remember input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--an-accent);
	cursor: pointer;
	margin: 0;
}

/* Submit button (an-btn base already styles red primary) */
.an-login__submit {
	width: 100%;
	padding: 13px 20px !important;
	font-size: 15px;
	margin-top: 2px;
}
.an-login__submit .an-btn__icon {
	transition: transform var(--an-trans-base);
}
.an-login__submit:hover .an-btn__icon {
	transform: translateX(3px);
}

/* ─── Divider ────────────────────────────────────────────── */
.an-login__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0 18px;
	color: var(--an-text-muted);
	font-size: 12.5px;
}
.an-login__divider::before,
.an-login__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--an-border);
}

/* ─── Signup CTA (ghost button) ──────────────────────────── */
.an-login__signup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 20px;
	background: transparent;
	border: 1px solid var(--an-border-strong);
	border-radius: var(--an-radius-sm);
	color: var(--an-heading);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--an-trans-base), background var(--an-trans-base), color var(--an-trans-base);
}
.an-login__signup svg {
	transition: transform var(--an-trans-base);
}
.an-login__signup:hover {
	border-color: var(--an-accent);
	color: var(--an-accent);
	background: rgba(225, 29, 46, 0.04);
}
.an-login__signup:hover svg { transform: translateX(3px); }

/* ─── OTP step (2-factor) ────────────────────────────────── */
.an-login__otp {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin: 4px 0 18px;
}
.an-login__otp input {
	width: 100%;
	height: 54px;
	padding: 0 !important;
	text-align: center;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--an-heading);
	background: var(--an-bg-primary);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-sm);
	transition: border-color var(--an-trans-base), box-shadow var(--an-trans-base);
}
.an-login__otp input:focus {
	outline: none;
	border-color: var(--an-accent);
	box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.14);
}

.an-login__resend {
	text-align: center;
	margin: 14px 0 0;
}
.an-login__resend p {
	font-size: 13px;
	color: var(--an-text-muted);
	margin: 0;
}
.an-link-button {
	background: none;
	border: 0;
	padding: 0;
	color: var(--an-accent);
	font-weight: 600;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	text-decoration: none;
}
.an-link-button:hover { text-decoration: underline; }

/* ─── Legal footer below card ────────────────────────────── */
.an-login__legal {
	text-align: center;
	font-size: 12.5px;
	color: var(--an-text-muted);
	margin: 0;
	line-height: 1.5;
}
.an-login__legal a {
	color: var(--an-text-muted);
	text-decoration: underline;
	text-decoration-color: rgba(139, 147, 163, 0.35);
}
.an-login__legal a:hover { color: var(--an-accent); }

/* ════════════════════════════════════════════════════════════════════════
   Forgot-password additions — icon, hint block, password-toggle inputs
   ════════════════════════════════════════════════════════════════════════ */

.an-forgot__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(225, 29, 46, 0.08);
	color: #E11D2E;
}
.an-forgot__icon--success {
	background: rgba(22, 163, 74, 0.10);
	color: #16A34A;
}

.an-forgot__hint {
	margin: 4px 0 18px;
	padding: 14px 16px;
	background: var(--an-bg-secondary);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius-md);
	font-size: 13px;
	color: var(--an-text-muted);
}
.an-forgot__hint p {
	margin: 0 0 6px;
	font-weight: 600;
	color: var(--an-heading);
}
.an-forgot__hint ul {
	list-style: disc;
	margin: 0;
	padding-left: 18px;
	line-height: 1.55;
}
.an-forgot__hint li { margin: 2px 0; }

/* Password input with show/hide toggle */
.an-field__pw {
	position: relative;
}
.an-field__pw input {
	padding-right: 44px;
}
.an-field__pw-toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--an-radius-sm);
	color: var(--an-text-muted);
	cursor: pointer;
	transition: color var(--an-trans-base), background var(--an-trans-base);
}
.an-field__pw-toggle:hover {
	color: var(--an-heading);
	background: var(--an-bg-secondary);
}
.an-field__pw-toggle .an-pw-eye-off { display: none; }
.an-field__pw-toggle.is-shown .an-pw-eye-open { display: none; }
.an-field__pw-toggle.is-shown .an-pw-eye-off  { display: block; color: #E11D2E; }

.an-field__hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--an-text-muted);
}

/* Password strength meter — used on the forgot-password reset step. */
.an-pw-strength {
	margin-top: 8px;
}
.an-pw-strength[hidden] { display: none; }
.an-pw-strength__bar {
	display: flex;
	gap: 4px;
	margin-bottom: 6px;
}
.an-pw-strength__seg {
	flex: 1;
	height: 4px;
	background: var(--an-border);
	border-radius: 2px;
	transition: background 0.2s ease;
}
.an-pw-strength[data-pw-level="1"] .an-pw-strength__seg.is-active { background: #e35353; }
.an-pw-strength[data-pw-level="2"] .an-pw-strength__seg.is-active { background: #e8a93a; }
.an-pw-strength[data-pw-level="3"] .an-pw-strength__seg.is-active { background: #a3c93e; }
.an-pw-strength[data-pw-level="4"] .an-pw-strength__seg.is-active { background: #2da866; }
.an-pw-strength__label {
	display: block;
	font-size: 12px;
	color: var(--an-text-muted);
	line-height: 1.4;
}
.an-pw-strength[data-pw-level="1"] .an-pw-strength__label { color: #c03333; }
.an-pw-strength[data-pw-level="2"] .an-pw-strength__label { color: #b88018; }
.an-pw-strength[data-pw-level="3"] .an-pw-strength__label { color: #5e8a1a; }
.an-pw-strength[data-pw-level="4"] .an-pw-strength__label { color: #1d6b46; }

/* Live "passwords match" indicator below the confirm field. */
.an-pw-match {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
}
.an-pw-match[hidden] { display: none; }
.an-pw-match.is-ok    { color: #1d6b46; }
.an-pw-match.is-error { color: #c03333; }

/* Back-to-login arrow before label */
.an-forgot .an-login__signup svg:first-child {
	margin-right: 2px;
}