/* ===== Minimal White UI + Animations (scoped) ===== */
	:root {
		--fp-bg: #ffffff;
		--fp-fg: #0f172a;
		/* slate-900 */
		--fp-muted: #64748b;
		/* slate-500 */
		--fp-line: #e2e8f0;
		/* slate-200 */
		--fp-primary: #111827;
		/* neutral-900 for minimal black button */
		--fp-primary-fg: #ffffff;
		--fp-success: #16a34a;
		--fp-danger: #dc2626;
		--fp-warning: #d97706;
		--fp-radius: 16px;
		--fp-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
	}

	.fp-wrap {
		min-height: 75dvh;
		display: grid;
		place-items: center;
		padding: 32px 16px;
		background: linear-gradient(180deg, #fff, #fafafa);
	}

	.fp-card {
		width: 100%;
		max-width: 560px;
		background: var(--fp-bg);
		border: 1px solid var(--fp-line);
		border-radius: var(--fp-radius);
		box-shadow: var(--fp-shadow);
		padding: 28px;
		animation: fp-fadeUp 420ms ease-out both;
	}

	.fp-title {
		font-size: clamp(1.4rem, 2.2vw, 1.9rem);
		font-weight: 700;
		letter-spacing: -0.02em;
		color: var(--fp-fg);
		margin: 4px 0 6px;
	}

	.fp-sub {
		color: var(--fp-muted);
		font-size: 0.95rem;
		margin-bottom: 18px;
	}

	.fp-group {
		margin: 14px 0;
	}

	.fp-label {
		display: block;
		font-size: 0.9rem;
		color: var(--fp-muted);
		margin-bottom: 6px;
	}

	.fp-input {
		appearance: none;
		width: 100%;
		padding: 14px 16px;
		border-radius: 12px;
		border: 1px solid var(--fp-line);
		background: #fff;
		color: var(--fp-fg);
		outline: none;
		transition: box-shadow .2s, border-color .2s, transform .05s;
	}

	.fp-input:focus {
		border-color: #cbd5e1;
		box-shadow: 0 0 0 6px rgba(2, 6, 23, 0.05);
	}

	.fp-input[aria-invalid="true"] {
		border-color: var(--fp-danger);
	}

	.fp-help {
		margin-top: 6px;
		font-size: 0.85rem;
		color: var(--fp-muted);
	}

	.fp-actions {
		margin-top: 18px;
		display: flex;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	.fp-btn {
		-webkit-tap-highlight-color: transparent;
		user-select: none;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 12px 18px;
		border-radius: 999px;
		font-weight: 700;
		letter-spacing: .01em;
		border: 1px solid var(--fp-fg);
		background: #198754;
		color: var(--fp-primary-fg);
		cursor: pointer;
		transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
		box-shadow: 0 6px 18px rgba(2, 6, 23, .12);
	}

	.fp-btn:hover {
		transform: translateY(-1px);
	}

	.fp-btn:active {
		transform: translateY(0);
		opacity: .9;
	}

	.fp-btn[disabled] {
		opacity: .45;
		cursor: not-allowed;
		box-shadow: none;
	}

	.fp-link {
		text-decoration: none;
		color: var(--fp-fg);
		font-weight: 600;
		border-bottom: 1px solid transparent;
	}

	.fp-link:hover {
		border-bottom-color: var(--fp-fg);
	}

	.fp-note {
		text-align: center;
		color: var(--fp-muted);
		font-size: .9rem;
		margin-top: 6px;
	}

	.fp-alert {
		border: 1px solid var(--fp-line);
		background: #fff;
		border-radius: 12px;
		padding: 14px 16px;
		margin: 10px 0 4px;
	}

	.fp-alert.success {
		border-color: rgba(22, 163, 74, .2);
	}

	.fp-alert.error {
		border-color: rgba(220, 38, 38, .2);
	}

	.fp-alert.warn {
		border-color: rgba(217, 119, 6, .2);
	}

	.fp-badge {
		display: inline-block;
		font-size: .75rem;
		padding: 4px 10px;
		border-radius: 999px;
		background: #f8fafc;
		border: 1px solid var(--fp-line);
		color: var(--fp-muted);
	}

	.fp-strength {
		height: 9px;
		border-radius: 99px;
		background: #f1f5f9;
		overflow: hidden;
		margin-top: 8px;
		border: 1px solid var(--fp-line);
	}

	.fp-strength>i {
		display: block;
		height: 100%;
		width: 0%;
		background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
		transition: width .3s ease;
	}

	.fp-suffix {
		position: absolute;
		right: 14px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		font-size: .9rem;
		color: var(--fp-muted);
		user-select: none;
	}

	@keyframes fp-fadeUp {
		from {
			opacity: 0;
			transform: translateY(8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}