:root {
	--ql-bg: #f3efe7;
	--ql-panel: #fffdf8;
	--ql-ink: #171512;
	--ql-muted: #746a5e;
	--ql-faint: #9b9082;
	--ql-line: #e4dbce;
	--ql-accent: #0f766e;
	--ql-accent-strong: #115e59;
	--ql-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Times New Roman", serif;
	--ql-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body.login {
	display: block;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background:
		radial-gradient(900px 620px at 100% 0%, rgba(15, 118, 110, .07), transparent 58%),
		radial-gradient(700px 500px at 0% 100%, rgba(180, 83, 9, .06), transparent 58%),
		var(--ql-bg);
	color: var(--ql-ink);
	font-family: var(--ql-sans);
	font-size: 14px;
}

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: .22;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E");
}

.qcard-login-brand {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 52vw;
	padding: 40px 52px 32px;
	overflow: hidden;
	background:
		radial-gradient(680px 420px at 100% 0%, rgba(20, 184, 166, .22), transparent 60%),
		radial-gradient(500px 380px at 0% 100%, rgba(180, 83, 9, .2), transparent 62%),
		linear-gradient(145deg, #1c1916 0%, #12100e 70%);
	color: #f8f3e9;
}

.qcard-login-brand::before {
	content: "";
	position: absolute;
	width: 440px;
	height: 440px;
	right: -180px;
	top: 18%;
	border-radius: 50%;
	border: 1px solid rgba(94, 234, 212, .12);
	box-shadow: 0 0 0 44px rgba(94, 234, 212, .03), 0 0 0 92px rgba(94, 234, 212, .02);
	pointer-events: none;
}

.qcard-login-brand::after {
	content: "Q";
	position: absolute;
	right: -8px;
	bottom: -70px;
	color: rgba(248, 243, 233, .035);
	font-family: var(--ql-serif);
	font-size: 300px;
	line-height: 1;
	pointer-events: none;
}

.qcard-login-brand__particles { position: absolute; inset: 0; pointer-events: none; }
.qcard-login-brand__particles i {
	position: absolute;
	top: -8%;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	border-radius: 60% 0 60% 0;
	background: #5eead4;
	opacity: 0;
	animation: qcard-login-fall var(--d) linear infinite;
	animation-delay: var(--delay);
}
.qcard-login-brand__particles i:nth-child(3n) { background: #f0c27a; }

@keyframes qcard-login-fall {
	0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
	15% { opacity: .7; }
	82% { opacity: .42; }
	100% { opacity: 0; transform: translate3d(var(--drift), calc(100vh + 40px), 0) rotate(280deg); }
}

.qcard-login-brand__top,
.qcard-login-brand__copy,
.qcard-login-brand__foot { position: relative; z-index: 3; }

.qcard-login-brand__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.qcard-login-brand__logo { display: inline-flex; align-items: center; gap: 11px; color: #f8f3e9; text-decoration: none; }
.qcard-login-brand__logo span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(145deg, #16a394, #0b5f59); font-weight: 800; font-size: 18px; box-shadow: 0 8px 22px rgba(15, 118, 110, .35), inset 0 1px 0 rgba(255,255,255,.35); }
.qcard-login-brand__logo strong { font-size: 15px; letter-spacing: .12em; }
.qcard-login-brand__tag { padding: 6px 9px; border: 1px solid rgba(248,243,233,.14); border-radius: 999px; color: rgba(248,243,233,.52); font-size: 9px; letter-spacing: .06em; }

.qcard-login-brand__copy { max-width: 640px; margin-top: -4vh; }
.qcard-login-eyebrow { margin: 0 0 13px; color: #5eead4; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.qcard-login-brand h1 { margin: 0; font-family: var(--ql-serif); font-size: clamp(38px, 4.2vw, 62px); font-weight: 600; line-height: 1.08; letter-spacing: -.055em; }
.qcard-login-brand h1 em { color: #5eead4; font-style: normal; }
.qcard-login-brand__copy > p:not(.qcard-login-eyebrow) { max-width: 520px; margin: 20px 0 0; color: rgba(248,243,233,.6); font-size: 13px; line-height: 1.85; }

.qcard-login-brand__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; max-width: 570px; }
.qcard-login-brand__features div { padding: 13px 14px; border: 1px solid rgba(248,243,233,.11); border-radius: 11px; background: rgba(255,255,255,.035); backdrop-filter: blur(4px); }
.qcard-login-brand__features strong { display: block; color: #5eead4; font-size: 9px; letter-spacing: .12em; }
.qcard-login-brand__features span { display: block; margin-top: 5px; font-size: 12px; font-weight: 700; }
.qcard-login-brand__features small { display: block; margin-top: 3px; color: rgba(248,243,233,.45); font-size: 8.5px; line-height: 1.45; }

.qcard-login-brand__foot { display: flex; justify-content: space-between; gap: 20px; padding-top: 15px; border-top: 1px solid rgba(248,243,233,.1); color: rgba(248,243,233,.35); font-size: 8.5px; }

#login {
	position: relative;
	z-index: 4;
	width: min(424px, calc(100vw - 36px));
	margin: 0 0 0 calc(52% + (48vw - 424px) / 2);
	padding: 11vh 0 46px;
}

#login h1 { display: none; }

.qcard-login-form-head { margin-bottom: 18px; }
.qcard-login-mobile-logo { display: none; align-items: center; gap: 9px; margin-bottom: 18px; }
.qcard-login-mobile-logo span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ql-accent); color: #fff; font-weight: 800; }
.qcard-login-mobile-logo strong { font-size: 15px; letter-spacing: .1em; }
.qcard-login-form-head .qcard-login-eyebrow { color: var(--ql-accent); }
.qcard-login-form-head h2 { margin: 0; font-family: var(--ql-serif); font-size: 35px; font-weight: 600; line-height: 1.12; letter-spacing: -.045em; }
.qcard-login-sub { max-width: 390px; margin: 9px 0 0; color: var(--ql-muted); font-size: 11.5px; line-height: 1.7; }

#login form {
	margin: 0;
	padding: 25px 26px 20px;
	border: 1px solid rgba(228, 219, 206, .9);
	border-radius: 22px;
	background: rgba(255, 253, 248, .9);
	box-shadow: 0 24px 60px rgba(39, 30, 20, .1), inset 0 1px 0 rgba(255,255,255,.7);
	backdrop-filter: blur(12px);
}

.login label { color: var(--ql-ink-soft, #3c362e); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100%;
	height: 48px;
	margin: 4px 0 0;
	padding: 0 13px;
	border: 1px solid var(--ql-line);
	border-radius: 10px;
	background: #fbf7ef;
	color: var(--ql-ink);
	font-size: 13px;
	box-shadow: inset 0 1px 2px rgba(39,30,20,.025);
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--ql-accent);
	background: #fffdf8;
	box-shadow: 0 0 0 3px rgba(15, 118, 110, .1);
	outline: 0;
}
.login .user-pass-wrap { margin-bottom: 15px; }
.login .wp-pwd { position: relative; }
.login .wp-pwd input { padding-right: 46px; }
.login .wp-hide-pw { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ql-faint); cursor: pointer; }
.login .wp-hide-pw:hover { background: #f1ece3; color: var(--ql-ink); }

.login .forgetmenot { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--ql-muted); font-size: 10.5px; }
.login .forgetmenot input { width: 14px; height: 14px; margin: 0; accent-color: var(--ql-accent); }
.login .submit { margin: 0; }
.login .button-primary {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(135deg, #12857b, #0c5f59);
	color: #fff;
	font-size: 13px;
	font-weight: 750;
	letter-spacing: .04em;
	box-shadow: 0 10px 24px rgba(15, 118, 110, .22), inset 0 1px 0 rgba(255,255,255,.18);
	text-shadow: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login .button-primary:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(15, 118, 110, .28); }
.login .button-primary:active { transform: translateY(0); }

#login_error,
.login .message {
	margin: 0 0 14px;
	padding: 11px 13px;
	border: 1px solid #f0c9c4;
	border-left: 3px solid #b42318;
	border-radius: 9px;
	background: #fff7f5;
	color: #8f1d14;
	font-size: 11px;
	line-height: 1.55;
	box-shadow: none;
}
.login .message { border-color: #bad8cf; border-left-color: var(--ql-accent); background: #f2faf6; color: var(--ql-accent-strong); }

#nav,
#backtoblog {
	margin: 16px 0 0;
	padding: 0;
	text-align: center;
	color: var(--ql-muted);
	font-size: 10.5px;
	line-height: 1.6;
}
#nav a,
#backtoblog a { color: var(--ql-accent-strong); text-decoration: none; }
#nav a:hover,
#backtoblog a:hover { text-decoration: underline; }
#backtoblog { margin-top: 8px; }

.login .privacy-policy-page-link { margin: 12px 0 0; }
.login .privacy-policy-page-link a { color: var(--ql-faint); font-size: 9px; }

@media (max-width: 900px) {
	.qcard-login-brand { display: none; }
	#login { width: min(424px, calc(100vw - 28px)); margin: 0 auto; padding: 48px 0 30px; }
	.qcard-login-mobile-logo { display: flex; }
	.qcard-login-form-head { margin-bottom: 14px; }
	.qcard-login-form-head h2 { font-size: 30px; }
	#login form { padding: 22px 20px 18px; border-radius: 18px; }
	body.login::before { opacity: .13; }
}

@media (max-width: 420px) {
	#login { padding-top: 32px; }
	.qcard-login-sub { font-size: 10.5px; }
}

.qcard-login-access { margin: 0 0 14px; color: var(--ql-faint); font-size: 9px; letter-spacing: .02em; }

.qcard-login-brand__parent-logo { width: 108px; height: auto; opacity: .72; }
.qcard-login-parent { margin: 0 0 7px; color: var(--ql-faint); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 901px) { .qcard-login-parent { display: none; } }