:root {
	--bb-card-bg: rgba(28, 28, 32, 0.88);
	--bb-card-shadow: rgba(0, 0, 0, 0.5);
	--bb-label-color: #ddd;
	--bb-input-bg: #2a2a30;
	--bb-input-border: #444;
	--bb-input-text: #f0f0f0;
	--bb-focus-border: #6ba8ff;
	--bb-focus-ring: rgba(107, 168, 255, 0.25);
	--bb-link-color: #f0f0f0;
	--bb-link-hover: #ffd93d;
}

body.login {
	background: linear-gradient(135deg, #0d1f33 0%, #1b2233 35%, #2a2015 70%, #3a2412 100%);
	min-height: 100vh;
}

/* Replaced by the real logo (.bb-login-logo, injected via the login_header action). */
.login h1 {
	display: none;
}

.bb-login-logo {
	text-align: center;
	margin-bottom: 1.5rem;
}

.bb-login-logo img {
	width: min(85vw, 420px);
	height: auto;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
}

.login form {
	background: var(--bb-card-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 1rem;
	box-shadow: 0 8px 30px var(--bb-card-shadow);
	padding: 2rem 2rem 1.5rem;
}

.login label {
	font-weight: 600;
	color: var(--bb-label-color);
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	border-radius: 0.6rem;
	border: 1.5px solid var(--bb-input-border);
	padding: 0.6rem 0.8rem;
	font-size: 1rem;
	background: var(--bb-input-bg);
	color: var(--bb-input-text);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--bb-focus-border);
	box-shadow: 0 0 0 3px var(--bb-focus-ring);
}

.wp-core-ui .button-primary {
	background: #4d96ff;
	border-color: #4d96ff;
	border-radius: 0.6rem;
	font-weight: 600;
	padding: 0.5rem 1.2rem;
	height: auto;
	box-shadow: none;
	text-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #2f7ce0;
	border-color: #2f7ce0;
}

.login #nav,
.login #backtoblog {
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: var(--bb-link-color);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--bb-link-hover);
}