/* Quantum Galaxy – branded login screen */
body.login {
	min-height: 100vh;
	font-family: "Manrope", system-ui, sans-serif;
	color: #EEF1FF;
	background:
		radial-gradient(ellipse 60% 50% at 80% 10%, rgba(59, 118, 240, .35), transparent 60%),
		radial-gradient(ellipse 50% 40% at 10% 90%, rgba(10, 15, 160, .55), transparent 60%),
		#070B1F;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow-x: hidden;
}

/* Twinkling stars */
.qg-login-stars,
.qg-login-stars::after {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
		radial-gradient(1px 1px at 28% 72%, #cfe0ff, transparent),
		radial-gradient(1.5px 1.5px at 44% 34%, #fff, transparent),
		radial-gradient(1px 1px at 63% 82%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 76% 26%, #cfe0ff, transparent),
		radial-gradient(1px 1px at 88% 60%, #fff, transparent),
		radial-gradient(1px 1px at 6% 52%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 54% 8%, #fff, transparent),
		radial-gradient(1px 1px at 94% 92%, #cfe0ff, transparent);
	animation: qg-login-twinkle 4s ease-in-out infinite alternate;
}
.qg-login-stars::after {
	content: "";
	transform: translate(7%, 11%);
	animation-delay: 2s;
}
@keyframes qg-login-twinkle { from { opacity: .25; } to { opacity: 1; } }

#login {
	position: relative;
	z-index: 1;
	width: min(400px, calc(100% - 32px));
	padding: 6vh 0 24px;
	margin: 0 auto;
}

/* Logo: orb + wordmark instead of the WordPress "W" */
.login h1 a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='20' cy='20' r='18'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='18' fill='%230A0FA0'/%3E%3Cg clip-path='url(%23c)' stroke='%233B76F0' stroke-width='5' stroke-linecap='round'%3E%3Cline x1='-2' y1='16' x2='16' y2='-2'/%3E%3Cline x1='2' y1='30' x2='30' y2='2'/%3E%3Cline x1='10' y1='40' x2='40' y2='10'/%3E%3Cline x1='24' y1='44' x2='44' y2='24'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='18.5' fill='none' stroke='%238FB0FF' stroke-opacity='.5'/%3E%3C/svg%3E");
	background-size: 46px 46px;
	background-position: left center;
	background-repeat: no-repeat;
	width: auto;
	height: 46px;
	display: inline-flex;
	align-items: center;
	padding-left: 58px;
	margin: 0 auto 26px;
	text-indent: 0;
	overflow: visible;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: .12em;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}
.login h1 a:hover { color: #fff; }
.login h1 { text-align: center; }
@media (max-width: 420px) { .login h1 a { font-size: 18px; } }
.login h1 a:focus { box-shadow: none; outline: 2px solid #3B76F0; outline-offset: 6px; border-radius: 8px; }

/* Heading above the card */
.qg-login-head { text-align: center; margin-bottom: 18px; }
.qg-login-head h2 {
	font-family: "Sora", sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 6px;
}
.qg-login-head p { color: #A9B6E0; font-size: 15px; margin: 0; }

/* WordPress notices */
.login .message,
.login .notice,
.login #login_error {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(143, 176, 255, .25);
	border-left: 4px solid #3B76F0;
	color: #DCE4FF;
	border-radius: 12px;
	box-shadow: none;
}
.login #login_error { border-left-color: #F87171; }
.login .message a, .login .notice a, .login #login_error a { color: #8FB0FF; }

/* Glass card */
.login form {
	background: rgba(14, 20, 60, .72);
	border: 1px solid rgba(143, 176, 255, .22);
	border-radius: 22px;
	padding: 28px 26px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(59, 118, 240, .08) inset;
	backdrop-filter: blur(10px);
	margin-top: 0;
}
.login label { color: #C9D3F5; font-size: 14px; font-weight: 600; }
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: rgba(7, 11, 31, .7);
	border: 1px solid rgba(143, 176, 255, .28);
	border-radius: 12px;
	color: #fff;
	font-size: 16px;
	padding: 10px 14px;
	min-height: 46px;
	box-shadow: none;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: #3B76F0;
	box-shadow: 0 0 0 3px rgba(59, 118, 240, .35);
	outline: none;
}
.login .button.wp-hide-pw { color: #8FB0FF; height: 46px; }
.login .button.wp-hide-pw:focus { box-shadow: 0 0 0 2px #3B76F0; border-color: transparent; }
.login input[type="checkbox"] {
	background: rgba(7, 11, 31, .7);
	border-color: rgba(143, 176, 255, .4);
	border-radius: 5px;
}
.login input[type="checkbox"]:checked::before { filter: hue-rotate(10deg) brightness(1.4); }
.login .forgetmenot label { font-weight: 500; }

/* Primary button */
.login .button-primary,
.wp-core-ui.login .button-primary {
	background: linear-gradient(135deg, #3B76F0, #2C5FDB);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-family: "Sora", sans-serif;
	font-weight: 600;
	font-size: 15px;
	min-height: 44px;
	padding: 0 26px;
	box-shadow: 0 10px 30px rgba(59, 118, 240, .4);
	text-shadow: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.login .button-primary:hover,
.login .button-primary:focus {
	background: linear-gradient(135deg, #4F86F7, #3B76F0);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 14px 34px rgba(59, 118, 240, .55);
}
.login .button-secondary,
.login .button.wp-generate-pw {
	background: transparent;
	border: 1px solid rgba(143, 176, 255, .4);
	border-radius: 999px;
	color: #DCE4FF;
}
.login .pw-weak, .login .indicator-hint, .login .description { color: #A9B6E0; }
.login #pass-strength-result { border-radius: 8px; }

/* Links under the card */
.login #nav,
.login #backtoblog { text-align: center; padding: 0; margin: 18px 0 0; }
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: #A9B6E0;
	text-decoration: none;
	font-size: 14px;
}
.login #nav a:hover,
.login #backtoblog a:hover { color: #fff; }
.qg-login-help { text-align: center; color: #7F8BB8; font-size: 13px; margin: 22px 0 0; position: relative; z-index: 1; }
.qg-login-help a { color: #8FB0FF; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.qg-login-stars, .qg-login-stars::after { animation: none; }
}