body, html {
	background: var(--bg-page, #f9fafc);
	color: var(--text-body, #64748b);
	font-family: var(--font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	height: 100%;
	margin: 0;
	padding: 0
}
.login-page-wrapper {
	align-items: center;
	background-color: var(--bg-page, #f9fafc);
	background-image: radial-gradient(rgba(79, 70, 229, .12) 1.2px, transparent 1.2px), linear-gradient(135deg, var(--bg-page, #f9fafc) 0, #f0f4f8 40%, #eef2ff 75%, var(--bg-page, #f9fafc) 100%);
	background-size: 24px 24px, 100% 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
	padding: 30px 20px;
	position: relative;
	width: 100vw
}
.login-page-wrapper:before {
	background: radial-gradient(circle, rgba(79, 70, 229, .16) 0, rgba(79, 70, 229, .08) 45%, rgba(59, 130, 246, 0) 70%);
	border-radius: 50%;
	content: "";
	filter: blur(80px);
	height: 600px;
	left: -8%;
	pointer-events: none;
	position: absolute;
	top: -12%;
	width: 600px;
	z-index: 0
}
.login-master-card {
	backdrop-filter: blur(10px);
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 32px;
	box-shadow: 0 25px 70px -15px rgba(15, 23, 42, .08), 0 4px 20px rgba(0, 0, 0, .02);
	display: flex;
	max-width: 1240px;
	min-height: 700px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 1
}
.login-left {
	background: linear-gradient(145deg, #f0f4ff, #eef2ff 50%, #f8fafc);
	border-right: 1px solid var(--border-color, #e8edf5);
	display: flex;
	flex: 1.2;
	flex-direction: column;
	justify-content: center;
	padding: 60px 64px;
	position: relative
}
.login-left-content {
	max-width: 520px;
	position: relative;
	z-index: 2
}
.brand-logo {
	gap: 12px
}
.brand-logo, .brand-logo-icon {
	align-items: center;
	display: flex
}
.brand-logo-icon {
	background: linear-gradient(135deg, var(--bs-primary, #2563eb) 0, #1f58d3 100%);
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(79, 70, 229, .28);
	color: var(--text-white, #fff);
	font-size: 22px;
	height: 46px;
	justify-content: center;
	width: 46px
}
.brand-logo-icon img {
	filter: brightness(0) invert(1);
	height: 28px;
	object-fit: contain;
	width: 28px
}
.brand-title {
	color: var(--text-heading, #1e293b);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 0
}
.brand-subtitle {
	color: var(--text-body, #64748b);
	font-size: 13px;
	font-weight: 500
}
.hero-badge {
	align-items: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 30px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	color: var(--text-title, #334155);
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px
}
.badge-dot {
	background-color: var(--bs-primary, #2563eb);
	border-radius: 50%;
	box-shadow: 0 0 6px #2563eb;
	display: inline-block;
	height: 8px;
	margin-right: 8px;
	width: 8px
}
.hero-title {
	color: var(--text-heading, #1e293b);
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.12
}
.hero-gradient-text {
	background: linear-gradient(135deg, var(--bs-primary, #2563eb) 0, #2563eb 50%, var(--bs-info, #3b82f6) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}
.hero-desc {
	color: var(--text-body, #64748b);
	font-size: 15px;
	line-height: 1.6
}
.ecosystem-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}
.ecosystem-tag {
	align-items: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 6px;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	transition: all .2s ease
}
.ecosystem-tag:hover {
	transform: translateY(-2px)
}
.tag-id {
	background: rgba(79, 70, 229, .08);
	border-color: rgba(79, 70, 229, .2);
	color: var(--bs-primary, #2563eb)
}
.tag-ui {
	background: rgba(79, 70, 229, .08);
	border-color: rgba(79, 70, 229, .2);
	color: #2563eb
}
.tag-market {
	background: rgba(59, 130, 246, .08);
	border-color: rgba(59, 130, 246, .2);
	color: var(--bs-info, #3b82f6)
}
.tag-db {
	background: var(--color-primary-light, rgba(79, 70, 229, .1));
	border-color: rgba(79, 70, 229, .25);
	color: var(--bs-primary, #2563eb)
}
.tag-assets {
	background: rgba(34, 197, 94, .08);
	border-color: rgba(34, 197, 94, .2);
	color: var(--bs-success, #22c55e)
}
.feature-cards {
	display: flex;
	flex-direction: column;
	gap: 14px
}
.feature-card {
	align-items: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 10px;
	box-shadow: var(--shadow-card, 0 4px 14px rgba(15, 23, 42, .03));
	display: flex;
	gap: 16px;
	padding: 16px 20px;
	transition: all .25s ease
}
.feature-card:hover {
	border-color: #cbd5e1;
	box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(79, 70, 229, .1));
	transform: translateY(-3px)
}
.feature-icon {
	align-items: center;
	border-radius: 12px;
	display: flex;
	flex-shrink: 0;
	font-size: 20px;
	height: 44px;
	justify-content: center;
	width: 44px
}
.icon-cyan {
	background: rgba(79, 70, 229, .1);
	color: var(--bs-primary, #2563eb)
}
.icon-purple {
	background: rgba(79, 70, 229, .1);
	color: #2563eb
}
.icon-accent {
	background: rgba(59, 130, 246, .1);
	color: var(--bs-info, #3b82f6)
}
.feature-title {
	color: var(--text-heading, #1e293b);
	font-size: 14.5px;
	font-weight: 700;
	margin: 0 0 2px
}
.feature-desc {
	color: var(--text-body, #64748b);
	font-size: 12.5px;
	line-height: 1.4;
	margin: 0
}
.hero-decorations {
	display: flex;
	gap: 12px
}
.floating-badge {
	align-items: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
	color: var(--text-title, #334155);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 14px
}
.text-primary {
	color: var(--bs-primary, #2563eb) !important
}
.text-purple {
	color: #2563eb !important
}
.text-accent {
	color: var(--bs-info, #3b82f6) !important
}
.text-success {
	color: var(--bs-success, #22c55e) !important
}
.login-right {
	align-items: center;
	background: var(--bg-card, #fff);
	display: flex;
	flex: 1;
	justify-content: center;
	padding: 50px
}
.login-form-card {
	max-width: 400px;
	width: 100%
}
.login-header h2 {
	color: var(--text-heading, #1e293b);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -.02em
}
.text-dark-title {
	color: var(--text-heading, #1e293b);
	font-size: 13.5px
}
.input-group-custom {
	align-items: center;
	display: flex;
	position: relative
}
.input-icon {
	color: var(--text-muted, #94a3b8);
	font-size: 16px;
	left: 14px;
	pointer-events: none;
	position: absolute;
	transition: color .2s ease;
	z-index: 2
}
.form-control-custom {
	background-color: var(--bg-page, #f9fafc);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 6px;
	color: var(--text-heading, #1e293b);
	font-size: 14px;
	outline: none;
	padding: 12px 14px 12px 42px;
	transition: all .2s ease-in-out;
	width: 100%
}
.form-control-custom::placeholder {
	color: var(--text-muted, #94a3b8);
	font-size: 13.5px
}
.form-control-custom:focus {
	background-color: var(--bg-card, #fff);
	border-color: var(--bs-primary, #2563eb);
	box-shadow: 0 0 0 4px var(--color-primary-light, rgba(79, 70, 229, .15))
}
.input-group-custom:focus-within .input-icon {
	color: var(--bs-primary, #2563eb)
}
.btn-toggle-password {
	align-items: center;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--text-muted, #94a3b8);
	cursor: pointer;
	display: flex;
	font-size: 16px;
	justify-content: center;
	padding: 4px;
	position: absolute;
	right: 12px;
	transition: color .2s ease;
	z-index: 2
}
.btn-toggle-password:hover {
	color: var(--text-heading, #1e293b)
}
.forgot-link {
	color: var(--bs-primary, #2563eb);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease
}
.forgot-link:hover {
	color: #1a0e9e;
	text-decoration: underline
}
.custom-checkbox .form-check-input {
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	cursor: pointer;
	height: 17px;
	margin-top: .1em;
	width: 17px
}
.custom-checkbox .form-check-input:checked {
	background-color: var(--bs-primary, #2563eb);
	border-color: var(--bs-primary, #2563eb)
}
.custom-checkbox .form-check-label {
	cursor: pointer;
	user-select: none
}
.btn-login {
	align-items: center;
	background: linear-gradient(135deg, var(--bs-primary, #2563eb) 0, #2563eb 100%);
	border: none;
	border-radius: 6px;
	box-shadow: 0 8px 22px rgba(79, 70, 229, .28);
	display: flex;
	font-size: 15px;
	font-weight: 700;
	justify-content: center;
	transition: all .25s ease
}
.btn-login, .btn-login:hover {
	color: var(--text-white, #fff)
}
.btn-login:hover {
	background: linear-gradient(135deg, #2563eb, #1a55d4);
	box-shadow: 0 10px 28px rgba(37, 99, 235, .38);
	transform: translateY(-2px)
}
.btn-login:active {
	box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
	transform: translateY(0)
}
.login-divider {
	margin: 22px 0;
	position: relative;
	text-align: center
}
.login-divider:before {
	background-color: var(--border-color, #e8edf5);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 1
}
.login-divider span {
	background-color: var(--bg-card, #fff);
	color: var(--text-muted, #94a3b8);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 0 14px;
	position: relative;
	z-index: 2
}
.btn-google {
	align-items: center;
	background: var(--bg-card, #fff);
	border: 1px solid var(--border-color, #e8edf5);
	border-radius: 6px;
	color: var(--text-title, #334155);
	cursor: pointer;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	transition: all .2s ease
}
.btn-google:hover {
	background-color: var(--bg-page, #f9fafc);
	border-color: #cbd5e1;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
	color: var(--text-heading, #1e293b)
}
.py-2-5 {
	padding-bottom: 11px;
	padding-top: 11px
}
.secure-access-badge {
	align-items: center;
	color: var(--text-muted, #94a3b8);
	display: flex;
	font-size: 11px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .08em
}
.fs-12 {
	font-size: 12px !important
}
.fs-13 {
	font-size: 13px !important
}
.fs-14 {
	font-size: 14px !important
}
.fs-15 {
	font-size: 15px !important
}
@media (max-width:991px) {
	.login-page-wrapper {
		background: var(--bg-card, #fff);
		padding: 0
	}
	.login-master-card {
		border: none;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh
	}
	.login-right {
		padding: 32px 20px;
		width: 100%
	}
}