:root {
			--tosca: #14b8a6;
			--tosca-dark: #0f9e90;
			--text-dark: #0f172a;
			--border: #d1d5db
		}

		body {
			margin: 0;
			min-height: 100vh;
			font-family: system-ui, -apple-system, sans-serif;
			overflow: hidden
		}

		@keyframes bgPan {
			0% {
				background-position: 0% center
			}

			50% {
				background-position: 100% center
			}

			100% {
				background-position: 0% center
			}
		}

		.bg-moving::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(rgba(20, 184, 166, .78), rgba(20, 184, 166, .78)), linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35))
		}

		.login-wrapper {
			position: relative;
			z-index: 1;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px
		}

		.login-card {
			width: 100%;
			max-width: 420px;
			background: #fff;
			border-radius: 20px;
			padding: 34px 32px;
			box-shadow: 0 30px 60px rgba(0, 0, 0, .35)
		}

		.login-header {
			text-align: center;
			margin-bottom: 26px
		}

		.login-header img {
			height: 128px;
			margin-bottom: 8px
		}

		.login-header h1 {
			font-size: 22px;
			font-weight: 700;
			letter-spacing: 1px;
			margin: 4px 0 0;
			color: var(--text-dark)
		}

		.login-header small {
			font-size: 13px;
			color: #64748b
		}

		.form-group {
			margin-bottom: 18px
		}

		.form-label {
			font-size: 13px;
			font-weight: 600;
			color: #475569;
			margin-bottom: 6px
		}

		.input-group {
			border: 1px solid var(--border);
			border-radius: 12px;
			display: flex;
			align-items: center;
			background: #fff;
			padding: 0 12px
		}

		.input-group i {
			font-size: 18px;
			color: #94a3b8
		}

		.form-control {
			border: none;
			height: 46px;
			padding: 0 10px;
			width: 100%
		}

		.form-control:focus {
			outline: none;
			box-shadow: none
		}

		.input-group:focus-within {
			border-color: var(--tosca);
			box-shadow: 0 0 0 2px rgba(20, 184, 166, .25)
		}

		.toggle-password {
			cursor: pointer
		}

		.toggle-password:hover {
			color: var(--tosca-dark)
		}

		.btn-login {
			height: 46px;
			border-radius: 12px;
			font-weight: 600;
			background: var(--tosca);
			color: #fff;
			border: none;
			width: 100%
		}

		.btn-login:hover {
			background: var(--tosca-dark)
		}

		.login-footer {
			text-align: center;
			font-size: 12px;
			color: #64748b;
			margin-top: 22px
		}

		@media (max-width:480px) {
			.login-card {
				padding: 28px 24px
			}
		}

		.app-desc {
			font-size: 13px;
			color: #475569;
			margin-top: 2px;
			margin-bottom: 2px
		}

		/* LOGIN ERROR */
		.login-error {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			background: #fef2f2;
			border: 1px solid #fecaca;
			color: #7f1d1d;
			padding: 14px 16px;
			border-radius: 14px;
			margin-bottom: 20px;
			font-size: 13px;
			animation: shake .35s ease-in-out;
		}

		.login-error i {
			font-size: 22px;
			color: #dc2626;
			margin-top: 2px;
		}

		.login-error strong {
			font-weight: 600;
			display: block;
			margin-bottom: 2px;
		}

		@keyframes shake {
			0% {
				transform: translateX(0);
			}

			25% {
				transform: translateX(-4px);
			}

			50% {
				transform: translateX(4px);
			}

			75% {
				transform: translateX(-3px);
			}

			100% {
				transform: translateX(0);
			}
		}