.ql-bg {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.ql-shell {
	width: 100%;
	max-width: 1100px;
}

/* Two-column flex with vertical divider */
.ql-columns {
	display: flex;
	align-items: stretch;
	gap: 3rem;
}

.ql-divider {
	width: 2px;
	align-self: stretch;
	border-radius: 2px;
	background: linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
	box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
	opacity: .7;
}

.ql-panel {
	flex: 1 1 0;
	min-width: 320px;
	border-radius: 1.25rem !important;
	background: #fff;
	color: black;
	position: relative;
	overflow: hidden;
	padding: 2.25rem !important;
}

	.ql-panel .watermark {
		position: absolute;
		right: -20px;
		bottom: -20px;
		font-size: 9rem;
		opacity: .08;
	}

.ql-brand-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .6rem;
	border-radius: 999px;
	background: rgba(255,255,255,.15);
	color: #fff;
	font-weight: 600;
	letter-spacing: .3px;
}

.ql-subtle {
	color: rgba(255,255,255,.9);
}

.ql-card {
	flex: 1 1 0;
	min-width: 360px;
	border-radius: 1rem !important;
	box-shadow: 0 30px 60px rgba(0,0,0,.25) !important;
	background: #fff;
	padding: 2rem !important;
}

	.ql-card .ui.input > input {
		height: 48px;
		font-size: 1.05rem;
	}

.ql-note {
	font-size: .95rem;
	color: #64748b;
}

/* Responsive: stack and hide divider on small screens */
@@media (max-width: 900px) {
	.ql-columns {
		flex-direction: column;
		gap: 2rem;
	}

	.ql-divider {
		display: none;
	}
}

.login-footer {
	margin-top: 6.5rem;
	text-align: center;
}

.env-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(245, 158, 11, 0.14);
	border-bottom: 1px solid rgba(245, 158, 11, 0.35);
	backdrop-filter: blur(6px);
}

/* Inner layout */
.env-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 8px 12px;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

/* Dot */
.env-dot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #f59e0b;
	flex: 0 0 auto;
}