/* Login / Register split card — meowish-style sliding overlay */

body.authPage{
	--auth-blue:#7b93ff;
	--auth-blue-soft:#8aa0ff;
	--auth-dot:#d5dced;
	--auth-field:#eef1f8;
	--auth-card:#ffffff;
	--auth-shadow:0 22px 50px -18px rgb(70 90 150 / 28%);
	background:#eef1f8;
}
body.authPage .mainWrapper,
body.authPage .mainInner,
body.authPage .blogContent,
body.authPage .mainbar{background:transparent}
body.authPage .mainMenu,
body.authPage .sidebar,
body.authPage .siteFooter,
body.authPage #mobile-menu,
body.authPage .navMenu{display:none!important}
body.authPage .headerLeft{padding-left:4px}

@media (min-width:881px){
	body.authPage .headerContent{max-width:none;padding:0 28px}
	body.authPage .headerLeft{flex:0 1 auto;width:auto}
	body.authPage .mainInner,
	body.authPage .siteFooter{margin-left:0;width:100%}
	body.authPage .mainInner{padding:36px 20px 48px;min-height:calc(100vh - var(--header-height))}
	body.authPage .blogContent .mainbar{max-width:none;width:100%;flex:1 1 100%}
}

.authPageInner{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:calc(100vh - var(--header-height) - 72px);
	padding:28px 12px 40px;
	background-image:radial-gradient(var(--auth-dot) 1.15px,transparent 1.2px);
	background-size:18px 18px;
	border-radius:0;
}

.authCard{
	position:relative;
	width:min(860px,100%);
	min-height:520px;
	background:var(--auth-card);
	border-radius:28px;
	box-shadow:var(--auth-shadow);
	overflow:hidden;
}
.authCard.is-boot,
.authCard.is-boot .authOverlay,
.authCard.is-boot .authFormWrap,
.authCard.is-boot .authOverlayInner{transition:none!important}
.authCard-signed{min-height:360px}

.authFormWrap{
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:40px 48px;
	text-align:center;
	transition:opacity .45s ease,visibility .45s ease,transform .6s cubic-bezier(.77,0,.18,1);
}
.authForm-login,
.authForm-lost{right:0}
.authForm-register{left:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-24px)}
.authForm-lost{opacity:0;visibility:hidden;pointer-events:none}

.authCard.is-register .authForm-login,
.authCard.is-register .authForm-lost,
.authCard.is-lost .authForm-login,
.authCard.is-lost .authForm-register{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}
.authCard.is-register .authForm-register{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:none;
}
.authCard.is-lost .authForm-lost{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

.authFormWrap h1{
	margin:0 0 28px;
	font-size:32px;
	font-weight:500;
	letter-spacing:.01em;
	color:#3d4654;
	font-family:var(--font-body,"Noto Sans",sans-serif);
}

.authForm{
	width:100%;
	max-width:320px;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:14px;
}

.authField{
	position:relative;
	display:block;
	width:100%;
}
.authField input{
	width:100%;
	height:48px;
	padding:0 44px 0 18px;
	border:0;
	border-radius:10px;
	background:var(--auth-field);
	color:#3d4654;
	outline:none;
	box-shadow:none;
}
.authField input::placeholder{color:#9aa3b2}
.authField input:focus{box-shadow:0 0 0 2px rgb(123 147 255 / 28%)}
.authField svg{
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-50%);
	width:18px;
	height:18px;
	pointer-events:none;
	color:#8b95a5;
}
.authField svg.line,
.authField svg .line{stroke:#8b95a5;stroke-width:1.5}

.authHint{
	display:none;
	position:absolute;
	left:0;
	top:calc(100% + 8px);
	align-items:center;
	gap:8px;
	padding:7px 10px;
	background:#fff;
	border-radius:8px;
	box-shadow:0 10px 24px rgb(40 50 80 / 14%);
	color:#5d6673;
	font-size:12px;
	line-height:1.2;
	white-space:nowrap;
	z-index:6;
}
.authField.is-invalid .authHint{display:inline-flex}
.authHint:before{
	content:"";
	position:absolute;
	left:18px;
	top:-5px;
	width:10px;
	height:10px;
	background:#fff;
	transform:rotate(45deg);
	box-shadow:-2px -2px 4px rgb(40 50 80 / 4%);
}
.authHint-icon{
	flex:0 0 16px;
	width:16px;
	height:16px;
	border-radius:3px;
	background:#f5a623;
	color:#fff;
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
}

.authForgot{
	margin:2px 0 4px;
	text-align:right;
	width:100%;
	max-width:320px;
}
.authForgot a{
	color:#7d8694;
	font-size:13px;
}
.authForgot a:hover{opacity:1;color:var(--auth-blue)}
.authForm-lost .authForgot{text-align:center;margin-top:12px}

.authBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:168px;
	height:44px;
	padding:0 28px;
	border-radius:12px;
	font-size:15px;
	font-weight:500;
	letter-spacing:.01em;
	cursor:pointer;
	border:1.5px solid transparent;
	transition:transform .15s ease,opacity .15s ease,background .15s ease;
}
.authBtn:hover{opacity:1;transform:translateY(-1px)}
.authBtn-fill{
	width:100%;
	max-width:320px;
	background:var(--auth-blue);
	color:#fff;
	margin-top:4px;
}
.authBtn-fill:hover{background:var(--auth-blue-soft)}
.authBtn-line{
	background:transparent;
	border-color:var(--auth-blue);
	color:var(--auth-blue);
}
.authBtn-ghost{
	background:transparent;
	border-color:#fff;
	color:#fff;
	min-width:148px;
	border-radius:999px;
}
.authBtn-ghost:hover{background:rgb(255 255 255 / 12%)}

.authSocialLabel{
	margin:22px 0 14px;
	color:#8b95a5;
	font-size:13px;
}
.authSocial{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
}
.authSocialBtn{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#eef1f8;
	color:#4a5564;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	font-weight:600;
	font-family:var(--font-body,"Noto Sans",sans-serif);
	text-decoration:none;
}
.authSocialBtn:hover{opacity:1;background:#e4e9f4}
.authSocialBtn svg{width:16px;height:16px;color:#4a5564}
.authSocialBtn svg.line,
.authSocialBtn svg .line{stroke:#4a5564}

.authFlash{
	width:100%;
	max-width:320px;
	margin:0 0 12px;
	padding:10px 12px;
	border-radius:10px;
	font-size:13px;
	line-height:1.4;
	background:#eef1f8;
	color:#5d6673;
}
.authFlash.is-error{background:#fff1f0;color:#c0392b}
.authFlash.is-ok{background:#eefbf3;color:#1e7a46}

.authOverlay{
	position:absolute;
	left:0;
	top:0;
	width:50%;
	height:100%;
	z-index:5;
	background:var(--auth-blue);
	border-radius:0 160px 160px 0;
	overflow:hidden;
	transition:transform .7s cubic-bezier(.77,0,.18,1),border-radius .7s cubic-bezier(.77,0,.18,1);
}
.authCard.is-register .authOverlay{
	transform:translateX(100%);
	border-radius:160px 0 0 160px;
}
.authCard.is-lost .authOverlay{opacity:1}

.authOverlayInner{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:36px 40px;
	text-align:center;
	color:#fff;
	transition:opacity .35s ease;
}
.authOverlayInner h2{
	margin:0 0 10px;
	font-size:32px;
	font-weight:500;
	color:#fff;
	font-family:var(--font-body,"Noto Sans",sans-serif);
}
.authOverlayInner p{
	margin:0 0 28px;
	font-size:14px;
	color:#fff;
	opacity:.92;
}
.authWelcome-register{opacity:0;pointer-events:none}
.authCard.is-register .authWelcome-login{opacity:0;pointer-events:none}
.authCard.is-register .authWelcome-register{opacity:1;pointer-events:auto}

.authSigned{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:48px 32px;
	text-align:center;
}
.authSigned h1{margin:0 0 8px;font-size:28px;color:#3d4654}
.authSigned p{margin:0 0 24px;color:#7d8694}
.authSignedActions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.darkMode body.authPage,
body.authPage.darkMode{--auth-card:#22252b;--auth-field:#2c3038;--auth-dot:#2a2e36;--auth-shadow:0 22px 50px -18px rgb(0 0 0 / 55%);background:#22262d}
.darkMode .authFormWrap h1,
.darkMode .authSigned h1{color:#f3f4f6}
.darkMode .authField input{color:#e8eaee}
.darkMode .authHint{background:#2c3038;color:#c8ccd0}
.darkMode .authHint:before{background:#2c3038}
.darkMode .authSocialBtn{background:#2c3038;color:#d7dbe0}
.darkMode .authCard-signed{background:var(--auth-card)}

@media (max-width:720px){
	.authPageInner{min-height:auto;padding:16px 12px 28px}
	.authCard{min-height:0;display:flex;flex-direction:column}
	.authOverlay{
		position:relative;
		width:100%;
		height:210px;
		order:-1;
		transform:none!important;
		border-radius:0 0 90px 90px!important;
	}
	.authFormWrap{
		position:relative;
		width:100%;
		height:auto;
		padding:28px 22px 32px;
		transform:none!important;
		display:none;
	}
	.authCard:not(.is-register):not(.is-lost) .authForm-login,
	.authCard.is-register .authForm-register,
	.authCard.is-lost .authForm-lost{display:flex;opacity:1;visibility:visible;pointer-events:auto}
	.authSigned{position:relative;min-height:280px}
	.authFormWrap h1,
	.authOverlayInner h2{font-size:26px}
}