/* =========================================================
   ROASTiME Auth V1
   Visual compatibility layer for OneSocial standalone auth.
   No authentication behavior is implemented here.
   ========================================================= */

html {
	min-height: 100%;
	background: #f4ebdd;
}

body.onesocial-social-page {
	--rt-auth-paper: #f4ebdd;
	--rt-auth-surface: #fffdf7;
	--rt-auth-ink: #171512;
	--rt-auth-muted: #6f675d;
	--rt-auth-line: #d6cbbc;
	--rt-auth-berry: #c85d86;
	--rt-auth-focus: #174ea6;

	min-height: 100vh;
	margin: 0;
	background: var(--rt-auth-paper);
	color: var(--rt-auth-ink);
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		"PingFang SC",
		"Hiragino Sans GB",
		"Microsoft YaHei",
		sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.onesocial-social-page *,
body.onesocial-social-page *::before,
body.onesocial-social-page *::after {
	box-sizing: border-box;
}

body.onesocial-social-page .container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh !important;
	padding: 48px 24px !important;
	background: var(--rt-auth-paper) !important;
}

body.onesocial-social-page .middle {
	position: relative;
	width: min(100%, 460px) !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 40px 42px 34px !important;
	background: var(--rt-auth-surface);
	border: 1px solid var(--rt-auth-line);
	border-radius: 24px;
	box-shadow:
		0 22px 60px rgba(23, 21, 18, .09);
}

body.onesocial-social-page .logo {
	height: auto !important;
	margin: 0 0 28px !important;
	text-align: center;
}

body.onesocial-social-page .logo a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.onesocial-social-page .logo .logo-img {
	width: 154px !important;
	max-width: 52vw;
	height: auto !important;
	margin: 0 auto;
}

body.onesocial-social-page .header {
	display: block !important;
	width: 100%;
	margin: 0 0 28px !important;
	text-align: center;
}

body.onesocial-social-page .header .title {
	margin: 0 0 13px !important;
	color: var(--rt-auth-ink);
	font-size: 30px !important;
	font-weight: 600 !important;
	line-height: 1.18 !important;
	letter-spacing: -.025em;
}

body.onesocial-social-page .header .subtitle {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center !important;
	gap: 6px 16px;
	width: 100%;
	color: var(--rt-auth-muted);
	font-size: 13px !important;
	line-height: 1.55;
}

body.onesocial-social-page a.link,
body.onesocial-social-page .header .subtitle a,
body.onesocial-social-page .footer a {
	color: var(--rt-auth-ink) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(23, 21, 18, .32);
	transition:
		border-color 160ms ease,
		color 160ms ease;
}

body.onesocial-social-page a.link:hover,
body.onesocial-social-page .header .subtitle a:hover,
body.onesocial-social-page .footer a:hover {
	color: var(--rt-auth-berry) !important;
	border-bottom-color: var(--rt-auth-berry);
}

body.onesocial-social-page .form {
	width: 100% !important;
	margin: 0 !important;
}

body.onesocial-social-page .field {
	width: 100%;
	margin: 0 0 15px !important;
}

body.onesocial-social-page .field .wrap {
	position: relative;
	width: 100%;
	min-height: 56px;
	background: #fff;
	border: 1px solid var(--rt-auth-line);
	border-radius: 12px;
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease;
}

body.onesocial-social-page .field .wrap:focus-within {
	border-color: var(--rt-auth-focus);
	box-shadow:
		0 0 0 3px rgba(23, 78, 166, .10);
}

body.onesocial-social-page .field input {
	width: 100% !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding-right: 46px !important;
	color: var(--rt-auth-ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 12px;
	box-shadow: none !important;
	font-family: inherit;
}

body.onesocial-social-page .field input:focus {
	outline: 0 !important;
}

body.onesocial-social-page .field .focus-text {
	color: var(--rt-auth-muted) !important;
}

body.onesocial-social-page .field .desc {
	display: block;
	margin: 8px 2px 0;
	color: var(--rt-auth-muted);
	font-size: 12px;
	line-height: 1.6;
}

body.onesocial-social-page .input-actions {
	right: 12px !important;
}

body.onesocial-social-page .input-action {
	color: var(--rt-auth-muted) !important;
}

body.onesocial-social-page .submit {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	min-height: 52px !important;
	margin: 4px 0 0 !important;
	padding: 0 22px !important;
	color: #fff !important;
	background: var(--rt-auth-ink) !important;
	border: 1px solid var(--rt-auth-ink) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition:
		transform 160ms ease,
		background-color 160ms ease;
}

body.onesocial-social-page .submit:hover {
	background: #000 !important;
	transform: translateY(-1px);
}

body.onesocial-social-page .submit:focus-visible,
body.onesocial-social-page .social-link:focus-visible,
body.onesocial-social-page a:focus-visible {
	outline: 3px solid rgba(23, 78, 166, .35);
	outline-offset: 3px;
}

body.onesocial-social-page .footer {
	width: 100%;
	margin: 17px 0 0 !important;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
}

body.onesocial-social-page .social {
	width: 100%;
	margin: 28px 0 0 !important;
	padding: 25px 0 0 !important;
	border-top: 1px solid var(--rt-auth-line);
}

body.onesocial-social-page .social .title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 !important;
	color: var(--rt-auth-muted) !important;
	font-size: 11px !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .08em;
}

body.onesocial-social-page .social .title::before,
body.onesocial-social-page .social .title::after {
	content: "";
	display: block;
	flex: 1 1 auto;
	max-width: 72px;
	height: 1px;
	background: var(--rt-auth-line) !important;
}

body.onesocial-social-page .social .icons {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center !important;
	gap: 12px;
	margin: 16px 0 0 !important;
}

body.onesocial-social-page .social .icons .social-link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 46px !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid var(--rt-auth-line) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer;
	transition:
		transform 160ms ease,
		border-color 160ms ease;
}

body.onesocial-social-page .social .icons .social-link:hover {
	transform: translateY(-1px);
	border-color: #a99d8e !important;
}

body.onesocial-social-page .social .icons .social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

body.onesocial-social-page .social .icons .social-link img {
	display: block;
	width: 24px !important;
	height: 24px !important;
	margin: 0 !important;
}

body.onesocial-social-page .qrcode {
	width: 100%;
	margin: 2px auto 0 !important;
	text-align: center;
}

body.onesocial-social-page .qrcode .qrcode-img-wrap {
	width: 240px !important;
	height: 240px !important;
	margin: 0 auto !important;
	padding: 11px !important;
	background: #fff;
	border: 1px solid var(--rt-auth-line);
	border-radius: 18px;
}

body.onesocial-social-page .qrcode .qrcode-img-inner {
	position: relative;
	width: 100% !important;
	height: 100% !important;
}

body.onesocial-social-page .qrcode img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 9px;
}

body.onesocial-social-page .qrcode .scan-text {
	display: block;
	margin: 14px 0 0 !important;
	color: var(--rt-auth-muted) !important;
	font-size: 13px !important;
	line-height: 1.5;
}

body.onesocial-social-page .qrcode .mask {
	border-radius: 9px !important;
	background: rgba(255, 253, 247, .94) !important;
}

body.onesocial-social-page .qrcode .mask .mask-text {
	padding: 16px;
	color: var(--rt-auth-ink) !important;
	font-size: 13px !important;
	line-height: 1.5;
}

body.onesocial-social-page .progress {
	overflow: hidden;
	border-radius: 999px;
}

body.onesocial-social-page .powered {
	margin-top: 22px !important;
	color: var(--rt-auth-muted) !important;
	font-size: 11px !important;
	opacity: .62;
}

body.onesocial-social-page .powered a {
	color: inherit !important;
}

@media (max-width: 640px) {

	body.onesocial-social-page .container {
		align-items: flex-start !important;
		padding: 16px 12px !important;
	}

	body.onesocial-social-page .middle {
		width: 100% !important;
		margin: 0 !important;
		padding: 30px 22px 28px !important;
		border-radius: 20px;
		box-shadow:
			0 12px 34px rgba(23, 21, 18, .07);
	}

	body.onesocial-social-page .logo {
		margin-bottom: 24px !important;
	}

	body.onesocial-social-page .logo .logo-img {
		width: 140px !important;
	}

	body.onesocial-social-page .header {
		margin-bottom: 24px !important;
	}

	body.onesocial-social-page .header .title {
		font-size: 27px !important;
	}

	body.onesocial-social-page .qrcode .qrcode-img-wrap {
		width: min(220px, calc(100vw - 92px)) !important;
		height: min(220px, calc(100vw - 92px)) !important;
	}

	body.onesocial-social-page .social {
		margin-top: 24px !important;
		padding-top: 22px !important;
	}
}