body.login {
	--todaiya-login-bg-top: #091255;
	--todaiya-login-bg-bottom: #202e79;
	--todaiya-login-accent: #fed23e;
	--todaiya-login-card: rgba(9, 18, 85, 0.78);
	--todaiya-login-card-border: rgba(255, 255, 255, 0.14);
	--todaiya-login-text: #f5f7ff;
	--todaiya-login-muted: #cfd6ff;
	--todaiya-login-input-bg: rgba(255, 255, 255, 0.92);
	--todaiya-login-input-text: #18204f;
	min-height: 100vh;
	display: grid;
	align-items: start;
	background:
		linear-gradient(180deg, rgba(9, 18, 85, 0.18), rgba(9, 18, 85, 0.84)),
		linear-gradient(180deg, var(--todaiya-login-bg-top), var(--todaiya-login-bg-bottom));
	color: var(--todaiya-login-text);
	font-family: 'Kosugi Maru', sans-serif;
}

body.login::before,
body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}

body.login::before {
	background: #202E79 url("../img/bgtodai_stars.png") repeat top center;
	background-size: min(900px, 85vw);
	opacity: 1;
}

body.login::after {
    background: transparent url(../img/bgtodai_twinkle.png) repeat top center;
    background-size: min(100px, 100px);
    opacity: 0.9;
    animation: todaiya-login-twinkle 160s linear infinite;
}

body.login div#login::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: min(42vw, 340px);
	background: url("../img/bgtodai_todai_and_ground_small.png") no-repeat center bottom;
	background-size: 100vw auto;
	pointer-events: none;
	z-index: -1;
}

@keyframes todaiya-login-twinkle {
	from {
		background-position: 0 0, center bottom;
	}
	to {
		background-position: -7000px 3000px, center bottom;
	}
}

body.login div#login {
	position: relative;
	z-index: 1;
	width: min(92vw, 430px);
	padding: 3.5rem 0 2.5rem;
}

.login h1 {
	margin-bottom: 0.9rem;
}

.login h1 a {
	width: 86px;
	height: 86px;
	margin: 0 auto;
	background-position: center;
	background-size: contain;
}

.todaiya-login-intro {
	margin-bottom: 1.2rem;
	text-align: center;
	color: var(--todaiya-login-text);
}

.todaiya-login-kicker {
	margin: 0 0 0.45rem;
	color: var(--todaiya-login-accent);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.todaiya-login-intro h2 {
	margin: 0;
	font-size: clamp(1.9rem, 4vw, 2.4rem);
	color: #fffef8;
}

.todaiya-login-intro p {
	margin: 0.55rem 0 0;
	color: var(--todaiya-login-muted);
	font-size: 0.95rem;
	line-height: 1.75;
}

.login form {
	padding: 1.6rem 1.5rem 1.4rem;
	border: 1px solid var(--todaiya-login-card-border);
	border-radius: 24px;
	background: var(--todaiya-login-card);
	box-shadow: 0 22px 60px rgba(4, 10, 36, 0.42);
	backdrop-filter: blur(10px);
}

.login label,
.login form .forgetmenot,
.login #backtoblog a,
.login #nav a,
.login .privacy-policy-page-link a {
	color: var(--todaiya-login-muted);
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	background: var(--todaiya-login-input-bg);
	color: var(--todaiya-login-input-text);
	box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: rgba(254, 210, 62, 0.85);
	box-shadow: 0 0 0 3px rgba(254, 210, 62, 0.2);
}

.wp-core-ui .button-primary {
	min-height: 46px;
	padding: 0 1.35rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #fed23e, #f8b83f);
	color: #1b2354;
	font-weight: 700;
	text-shadow: none;
	box-shadow: 0 10px 24px rgba(248, 184, 63, 0.24);
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: linear-gradient(135deg, #ffe37a, #fed23e);
	color: #111a46;
}

.login .message,
.login #login_error,
.login .success {
	border-left: 4px solid var(--todaiya-login-accent);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 12px 35px rgba(4, 10, 36, 0.22);
}

.login .message,
.login .success {
	color: #233066;
}

.login #login_error {
	color: #8d1e2f;
}

.login #backtoblog,
.login #nav,
.login .privacy-policy-page-link {
	text-align: center;
}

.login #backtoblog a:hover,
.login #nav a:hover,
.login .privacy-policy-page-link a:hover {
	color: #ffffff;
}

@media screen and (max-width: 782px) {
	body.login {
		align-items: center;
	}

	body.login div#login {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.login form {
		padding: 1.35rem 1.1rem 1.2rem;
		border-radius: 20px;
	}

	body.login::before {
		background-size: 180vw;
	}

	body.login::after {
		background-size: 180vw;
	}

	body.login div#login::before {
		height: min(58vw, 280px);
		background-size: 100vw auto;
	}
}