:root {
	--primary-500: #2F4550;
	--primary-600: #263a43;
	--accent-500: #946612;
	--accent-600: #7a550f;
	--accent-50: #f5efe6;
	--bg-white: rgba(255, 255, 255, 0.88);
	--text-main: #0f172a;
	--text-muted: #64748b;
	--border-color: rgba(255, 255, 255, 0.2);
	--shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	--radius: 16px;
	--input-radius: 10px;
}

/* ============================================
           BODY
           ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: linear-gradient(135deg, #1c2c33 0%, #2F4550 40%, #3a5a6a 100%);
	overflow: hidden;
	position: relative;
}

/* ============================================
           ANIMATED ICON BACKGROUND
           ============================================ */
.icon-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

	.icon-bg i {
		position: absolute;
		color: rgba(255, 255, 255, 0.07);
		font-size: 2.5rem;
		animation: floatIcon 18s infinite ease-in-out;
	}

/* Multi-directional floating + rotation */
@keyframes floatIcon {
	0% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.3;
	}

	20% {
		transform: translate(60px, -80px) rotate(15deg) scale(1.3);
		opacity: 0.8;
	}

	40% {
		transform: translate(-50px, -120px) rotate(-10deg) scale(0.8);
		opacity: 0.4;
	}

	60% {
		transform: translate(80px, -40px) rotate(20deg) scale(1.1);
		opacity: 0.9;
	}

	80% {
		transform: translate(-40px, -160px) rotate(-15deg) scale(1.2);
		opacity: 0.5;
	}

	100% {
		transform: translate(0, 0) rotate(0deg) scale(1);
		opacity: 0.3;
	}
}

/* ----- 20 Icons with different sizes & speeds ----- */
.icon-bg i:nth-child(1) {
	top: 5%;
	left: 5%;
	font-size: 3.2rem;
	animation-duration: 16s;
	animation-delay: 0s;
}

.icon-bg i:nth-child(2) {
	top: 12%;
	right: 6%;
	font-size: 2.4rem;
	animation-duration: 19s;
	animation-delay: 1s;
}

.icon-bg i:nth-child(3) {
	bottom: 18%;
	left: 8%;
	font-size: 3.8rem;
	animation-duration: 22s;
	animation-delay: 2s;
}

.icon-bg i:nth-child(4) {
	bottom: 22%;
	right: 10%;
	font-size: 2.6rem;
	animation-duration: 17s;
	animation-delay: 3s;
}

.icon-bg i:nth-child(5) {
	top: 40%;
	left: 2%;
	font-size: 2rem;
	animation-duration: 20s;
	animation-delay: 4s;
}

.icon-bg i:nth-child(6) {
	top: 55%;
	right: 3%;
	font-size: 3rem;
	animation-duration: 15s;
	animation-delay: 5s;
}

.icon-bg i:nth-child(7) {
	top: 75%;
	left: 18%;
	font-size: 2.2rem;
	animation-duration: 21s;
	animation-delay: 6s;
}

.icon-bg i:nth-child(8) {
	top: 30%;
	left: 48%;
	font-size: 2.8rem;
	animation-duration: 18s;
	animation-delay: 7s;
}

.icon-bg i:nth-child(9) {
	top: 65%;
	right: 28%;
	font-size: 2.2rem;
	animation-duration: 23s;
	animation-delay: 8s;
}

.icon-bg i:nth-child(10) {
	top: 8%;
	left: 68%;
	font-size: 3.4rem;
	animation-duration: 14s;
	animation-delay: 9s;
}

.icon-bg i:nth-child(11) {
	bottom: 5%;
	right: 38%;
	font-size: 2.9rem;
	animation-duration: 24s;
	animation-delay: 10s;
}

.icon-bg i:nth-child(12) {
	top: 48%;
	left: 82%;
	font-size: 2.2rem;
	animation-duration: 16s;
	animation-delay: 11s;
}

.icon-bg i:nth-child(13) {
	top: 15%;
	left: 35%;
	font-size: 2rem;
	animation-duration: 20s;
	animation-delay: 12s;
}

.icon-bg i:nth-child(14) {
	bottom: 45%;
	left: 55%;
	font-size: 3rem;
	animation-duration: 18s;
	animation-delay: 13s;
}

.icon-bg i:nth-child(15) {
	top: 85%;
	right: 55%;
	font-size: 2.4rem;
	animation-duration: 22s;
	animation-delay: 14s;
}

.icon-bg i:nth-child(16) {
	top: 20%;
	right: 80%;
	font-size: 2.6rem;
	animation-duration: 19s;
	animation-delay: 15s;
}

.icon-bg i:nth-child(17) {
	bottom: 30%;
	left: 40%;
	font-size: 2rem;
	animation-duration: 21s;
	animation-delay: 16s;
}

.icon-bg i:nth-child(18) {
	top: 70%;
	left: 75%;
	font-size: 2.8rem;
	animation-duration: 17s;
	animation-delay: 17s;
}

.icon-bg i:nth-child(19) {
	bottom: 10%;
	left: 80%;
	font-size: 2.2rem;
	animation-duration: 20s;
	animation-delay: 18s;
}

.icon-bg i:nth-child(20) {
	top: 50%;
	left: 15%;
	font-size: 2.6rem;
	animation-duration: 23s;
	animation-delay: 19s;
}

/* Additional icons - extra spread */
.icon-bg i:nth-child(21) {
	top: 2%;
	left: 50%;
	font-size: 2rem;
	animation-duration: 25s;
	animation-delay: 20s;
}

.icon-bg i:nth-child(22) {
	bottom: 2%;
	right: 20%;
	font-size: 2.4rem;
	animation-duration: 18s;
	animation-delay: 21s;
}

.icon-bg i:nth-child(23) {
	top: 60%;
	left: 95%;
	font-size: 2rem;
	animation-duration: 22s;
	animation-delay: 22s;
}

.icon-bg i:nth-child(24) {
	top: 25%;
	right: 50%;
	font-size: 2.2rem;
	animation-duration: 20s;
	animation-delay: 23s;
}

.icon-bg i:nth-child(25) {
	bottom: 60%;
	right: 60%;
	font-size: 2.8rem;
	animation-duration: 16s;
	animation-delay: 24s;
}

/* ============================================
           LOGIN CARD - GLASSMORPHISM
           ============================================ */
.login-container {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

.login-card {
	background: var(--bg-white);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--radius);
	padding: 28px 28px 32px;
	box-shadow: var(--shadow);
	border: 1px solid rgba(255, 255, 255, 0.25);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: hidden;
}

	.login-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
	}

	.login-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, var(--primary-500) 0%, var(--accent-500) 50%, var(--primary-500) 100%);
	}

/* ============================================
           BRAND SECTION
           ============================================ */
.login-brand {
	text-align: center;
	margin-bottom: 20px;
}

	.login-brand .logo {
		max-height: 58px;
		width: auto;
		object-fit: contain;
		display: block;
		margin: 0 auto 4px auto;
	}

	.login-brand .logo-fallback {
		display: none;
		font-size: 1.4rem;
		font-weight: 700;
		color: var(--primary-500);
		letter-spacing: -0.5px;
	}

		.login-brand .logo-fallback span {
			color: var(--accent-500);
		}

	.login-brand .sub-title {
		font-size: 0.8rem;
		color: var(--text-muted);
		font-weight: 400;
		margin-top: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

		.login-brand .sub-title i {
			color: var(--accent-500);
			font-size: 0.7rem;
		}

	.login-brand .tagline {
		margin-top: 4px;
		font-size: 0.7rem;
		color: var(--text-muted);
		background: var(--accent-50);
		display: inline-block;
		padding: 2px 14px;
		border-radius: 30px;
		font-weight: 500;
	}

/* ============================================
           FORM
           ============================================ */
.divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 18px 0;
}

	.divider::before,
	.divider::after {
		content: '';
		flex: 1;
		height: 1px;
		background: var(--border-color);
	}

	.divider span {
		font-size: 0.65rem;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--text-muted);
		font-weight: 500;
		white-space: nowrap;
	}

.form-group {
	margin-bottom: 14px;
	position: relative;
}

	.form-group label {
		display: block;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--text-main);
		margin-bottom: 4px;
	}

	.form-group .input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		background: rgba(241, 245, 249, 0.7);
		border: 1.5px solid var(--border-color);
		border-radius: var(--input-radius);
		transition: all 0.25s ease;
		backdrop-filter: blur(4px);
	}

		.form-group .input-wrapper:focus-within {
			border-color: var(--primary-500);
			box-shadow: 0 0 0 3px rgba(47, 69, 80, 0.12);
			background: rgba(255, 255, 255, 0.95);
		}

		.form-group .input-wrapper .icon {
			padding: 0 0 0 12px;
			color: var(--text-muted);
			font-size: 0.85rem;
			transition: color 0.2s ease;
		}

		.form-group .input-wrapper:focus-within .icon {
			color: var(--primary-500);
		}

		.form-group .input-wrapper input {
			width: 100%;
			padding: 9px 12px 9px 8px;
			border: none;
			background: transparent;
			font-size: 0.85rem;
			font-family: inherit;
			color: var(--text-main);
			outline: none;
		}

			.form-group .input-wrapper input::placeholder {
				color: var(--text-muted);
				font-weight: 400;
				font-size: 0.8rem;
				opacity: 0.7;
			}

		.form-group .input-wrapper .toggle-password {
			padding-right: 12px;
			color: var(--text-muted);
			cursor: default;
			font-size: 0.85rem;
		}

.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 4px 0 16px 0;
	flex-wrap: wrap;
	gap: 6px;
}

	.form-options .remember-me {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.78rem;
		color: var(--text-muted);
		cursor: default;
	}

		.form-options .remember-me input[type="checkbox"] {
			width: 16px;
			height: 16px;
			accent-color: var(--accent-500);
			border-radius: 4px;
			cursor: default;
			border: 1.5px solid var(--border-color);
		}

	.form-options .forgot-link {
		font-size: 0.78rem;
		font-weight: 500;
		color: var(--accent-500);
		text-decoration: none;
		transition: color 0.2s ease;
		cursor: default;
	}

		.form-options .forgot-link:hover {
			color: var(--accent-600);
			text-decoration: underline;
		}

.btn-login {
	width: 100%;
	padding: 10px;
	background: var(--accent-500);
	color: white;
	border: none;
	border-radius: var(--input-radius);
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: default;
	transition: all 0.25s ease;
	box-shadow: 0 3px 12px rgba(148, 102, 18, 0.25);
}

	.btn-login:hover {
		background: var(--accent-600);
		box-shadow: 0 4px 16px rgba(148, 102, 18, 0.35);
		transform: translateY(-1px);
	}

	.btn-login i {
		font-size: 0.8rem;
	}

/* ============================================
           FOOTER
           ============================================ */
.login-footer {
	text-align: center;
	margin-top: 16px;
	font-size: 0.7rem;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

	.login-footer .powered {
		font-weight: 500;
		color: var(--primary-500);
		letter-spacing: 0.2px;
	}

		.login-footer .powered span {
			color: var(--accent-500);
			font-weight: 700;
		}

	.login-footer a {
		color: var(--primary-500);
		font-weight: 500;
		text-decoration: none;
		transition: color 0.2s ease;
		cursor: default;
	}

		.login-footer a:hover {
			color: var(--accent-500);
			text-decoration: underline;
		}

/* ============================================
           ERROR / DEMO
           ============================================ */
.error-message {
	display: none;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	padding: 8px 12px;
	color: #b91c1c;
	font-size: 0.78rem;
	margin-bottom: 12px;
	align-items: center;
	gap: 6px;
}

	.error-message i {
		font-size: 0.9rem;
	}

	.error-message.show {
		display: flex;
	}

.demo-note {
	margin-top: 12px;
	padding: 6px 12px;
	background: var(--accent-50);
	border-radius: 6px;
	font-size: 0.7rem;
	color: var(--accent-600);
	text-align: center;
	border: 1px dashed var(--accent-200);
}

	.demo-note strong {
		color: var(--accent-500);
	}

/* ============================================
           RESPONSIVE
           ============================================ */
@media (max-width: 480px) {
	.login-card {
		padding: 20px 16px 24px;
	}

	.login-brand .logo {
		max-height: 44px;
	}

	.login-brand .sub-title {
		font-size: 0.7rem;
	}

	.form-group .input-wrapper input {
		font-size: 0.8rem;
		padding: 8px 10px 8px 6px;
	}

	.btn-login {
		padding: 10px;
		font-size: 0.85rem;
	}

	.form-options {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.icon-bg i {
		font-size: 1.8rem !important;
	}
}

@media (max-width: 380px) {
	.login-card {
		padding: 16px 12px 20px;
	}

	.login-brand .logo {
		max-height: 36px;
	}
}