* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: "Segoe UI", sans-serif;
		}

		body {
			min-height: 100vh;
			background: linear-gradient(135deg, #081a3a, #0d2c5c);
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		/* ───── Login Card ───── */
		.login-container {
			background: #0f2f5e;
			width: 100%;
			max-width: 420px;
			padding: 40px;
			border-radius: 16px;
			box-shadow: 0 20px 40px rgba(0,0,0,0.35);
		}

		.logo {
			text-align: center;
			font-size: 28px;
			font-weight: 700;
			color: #ffcc33;
			margin-bottom: 10px;
		}

		.subtitle {
			text-align: center;
			font-size: 14px;
			color: #cbd5e1;
			margin-bottom: 30px;
		}

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

		.form-group label {
			display: block;
			font-size: 13px;
			margin-bottom: 6px;
			color: #e5e7eb;
		}

		.form-group input {
			width: 100%;
			padding: 12px 14px;
			border-radius: 10px;
			border: none;
			outline: none;
			font-size: 14px;
			background: #f8fafc;
			color: #111827;
		}

		.form-group input::placeholder {
			color: #9ca3af;
		}

		.forgot-pass-link {
			text-align: right;
			margin-bottom: 20px;
		}

		.forgot-pass-link a {
			font-size: 13px;
			color: #ffcc33;
			text-decoration: none;
			font-weight: 500;
			cursor: pointer;
		}

		.forgot-pass-link a:hover {
			text-decoration: underline;
		}

		.login-btn {
			width: 100%;
			padding: 14px;
			background: #ffcc33;
			color: #111827;
			border: none;
			border-radius: 12px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: 0.3s ease;
		}

		.login-btn:hover {
			background: #fbbf24;
			transform: translateY(-1px);
		}

		.divider {
			text-align: center;
			margin: 22px 0;
			font-size: 13px;
			color: #cbd5e1;
		}

		.signup-link {
			text-align: center;
			font-size: 14px;
			color: #cbd5e1;
		}

		.signup-link a {
			color: #ffcc33;
			text-decoration: none;
			font-weight: 500;
		}

		.signup-link a:hover {
			text-decoration: underline;
		}

		/* ───── Forgot Password Modal ───── */
		.modal-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.6);
			z-index: 999;
			align-items: center;
			justify-content: center;
		}

		.modal-overlay.active {
			display: flex;
		}

		.modal {
			background: #0f2f5e;
			width: 100%;
			max-width: 400px;
			border-radius: 16px;
			padding: 36px;
			box-shadow: 0 24px 48px rgba(0,0,0,0.5);
			border: 1px solid rgba(255,255,255,0.07);
			position: relative;
			margin: 20px;
		}

		.modal-close {
			position: absolute;
			top: 16px;
			right: 18px;
			background: none;
			border: none;
			color: #94a3b8;
			font-size: 22px;
			cursor: pointer;
			line-height: 1;
			padding: 4px 8px;
			border-radius: 8px;
			transition: 0.2s;
		}

		.modal-close:hover {
			background: rgba(255,255,255,0.1);
			color: #fff;
		}

		.modal-title {
			font-size: 20px;
			font-weight: 700;
			color: #fff;
			margin-bottom: 6px;
		}

		.modal-subtitle {
			font-size: 13px;
			color: #94a3b8;
			margin-bottom: 24px;
			line-height: 1.6;
		}

		/* Step visibility */
		.fp-step {
			display: none;
		}

		.fp-step.active {
			display: block;
		}

		/* OTP inputs */
		.otp-row {
			display: flex;
			gap: 10px;
			justify-content: center;
			margin-bottom: 20px;
		}

		.otp-row input {
			width: 46px;
			height: 52px;
			text-align: center;
			font-size: 20px;
			font-weight: 600;
			border-radius: 10px;
			border: 2px solid transparent;
			background: #f8fafc;
			color: #111827;
			outline: none;
			transition: border-color 0.2s;
		}

		.otp-row input:focus {
			border-color: #ffcc33;
		}

		.modal-btn {
			width: 100%;
			padding: 13px;
			background: #ffcc33;
			color: #111827;
			border: none;
			border-radius: 12px;
			font-size: 15px;
			font-weight: 600;
			cursor: pointer;
			transition: 0.3s ease;
		}

		.modal-btn:hover {
			background: #fbbf24;
			transform: translateY(-1px);
		}

		.modal-btn:disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: none;
		}

		.back-link {
			text-align: center;
			margin-top: 16px;
		}

		.back-link a {
			font-size: 13px;
			color: #ffcc33;
			text-decoration: none;
			cursor: pointer;
		}

		.back-link a:hover {
			text-decoration: underline;
		}

		/* Password field with eye toggle */
		.pass-wrapper {
			position: relative;
		}

		.pass-wrapper input {
			padding-right: 44px;
		}

		.eye-toggle {
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			background: none;
			border: none;
			cursor: pointer;
			color: #9ca3af;
			font-size: 16px;
			padding: 2px;
			line-height: 1;
		}

		.eye-toggle:hover {
			color: #6b7280;
		}

		/* OTP timer */
		.otp-note {
			text-align: center;
			font-size: 12px;
			color: #64748b;
			margin-bottom: 16px;
		}

		.otp-note a {
			color: #ffcc33;
			text-decoration: none;
			cursor: pointer;
		}

		.otp-note a:hover {
			text-decoration: underline;
		}

		/* Success screen */
		.success-icon {
			text-align: center;
			margin-bottom: 16px;
		}

		.success-icon svg {
			width: 60px;
			height: 60px;
		}

		.success-msg {
			text-align: center;
			font-size: 14px;
			color: #94a3b8;
			line-height: 1.7;
			margin-bottom: 24px;
		}

		.success-msg strong {
			color: #fff;
		}

		/* Error messages */
		.modal-error {
			color: #f87171;
			font-size: 13px;
			margin-bottom: 12px;
			min-height: 18px;
		}

		@media (max-width: 480px) {
			.login-container {
				margin: 20px;
				padding: 30px 24px;
			}
			.otp-row input {
				width: 38px;
				height: 44px;
				font-size: 17px;
			}
		}