:root {
	--yyr-access-brand: #b32147;
	--yyr-access-brand-dark: #951c3b;
	--yyr-access-teal: #0ea0a8;
	--yyr-access-navy: #055771;
	--yyr-access-text: #171717;
	--yyr-access-muted: #687079;
	--yyr-access-border: #eadde1;
}

* {
	box-sizing: border-box;
}

body.yyr-access-login-page {
	margin: 0;
	color: var(--yyr-access-text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background:
		radial-gradient(circle at 12% 16%, rgba(14, 160, 168, 0.08), transparent 29%),
		radial-gradient(circle at 88% 84%, rgba(254, 113, 113, 0.09), transparent 30%),
		#f7f8f8;
}

.yyr-access-login {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: clamp(24px, 5vw, 64px);
}

.yyr-access-login__card {
	position: relative;
	width: min(100%, 460px);
	padding: 42px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--yyr-access-border);
	border-radius: 24px;
	box-shadow: 0 22px 60px rgba(36, 51, 58, 0.1);
}

.yyr-access-login__card::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--yyr-access-teal), var(--yyr-access-brand), #fe7171);
	content: "";
}

.yyr-access-login__header {
	margin-bottom: 28px;
}

.yyr-access-login__logo {
	display: block;
	width: min(100%, 286px);
	height: auto;
	margin: 0 0 32px;
}

.yyr-access-login h1 {
	margin: 0 0 12px;
	color: var(--yyr-access-text);
	font-size: clamp(29px, 4vw, 34px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.yyr-access-login__intro {
	max-width: 350px;
	margin: 0;
	color: var(--yyr-access-muted);
	font-size: 15px;
	line-height: 1.6;
}

.yyr-access-login__error {
	margin-bottom: 20px;
	padding: 12px 14px;
	color: #841b36;
	font-size: 14px;
	line-height: 1.45;
	background: #fff1f4;
	border: 1px solid #f0c5d0;
	border-radius: 12px;
}

.yyr-access-login__form {
	display: grid;
	gap: 11px;
}

.yyr-access-login__form label {
	margin-top: 6px;
	color: #252525;
	font-size: 14px;
	font-weight: 700;
}

.yyr-access-login__form input {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	color: var(--yyr-access-text);
	font: inherit;
	background: #fff;
	border: 1px solid #d7dadd;
	border-radius: 12px;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.yyr-access-login__form input:focus {
	border-color: var(--yyr-access-brand);
	box-shadow: 0 0 0 3px rgba(179, 33, 71, 0.1);
}

.yyr-access-login__form button {
	min-height: 52px;
	margin-top: 14px;
	padding: 0 20px;
	color: #fff;
	font: inherit;
	font-weight: 700;
	background: var(--yyr-access-brand);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(179, 33, 71, 0.18);
	transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.yyr-access-login__form button:hover,
.yyr-access-login__form button:focus-visible {
	background: var(--yyr-access-brand-dark);
	box-shadow: 0 12px 28px rgba(179, 33, 71, 0.24);
	outline: none;
	transform: translateY(-1px);
}

.yyr-access-login__form button:active {
	transform: translateY(0);
}

@media (max-width: 480px) {
	.yyr-access-login {
		padding: 16px;
	}

	.yyr-access-login__card {
		padding: 32px 22px 26px;
		border-radius: 18px;
	}

	.yyr-access-login__header {
		margin-bottom: 24px;
	}

	.yyr-access-login__logo {
		width: min(100%, 248px);
		margin-bottom: 26px;
	}

	.yyr-access-login h1 {
		font-size: 28px;
	}

	.yyr-access-login__intro {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yyr-access-login__form input,
	.yyr-access-login__form button {
		transition: none;
	}
}