:root {
	--fjlc-primary: #07523d;
	--fjlc-accent: #b8ed74;
	--fjlc-ink: #102a25;
	--fjlc-muted: #61716c;
	--fjlc-line: #dce9e3;
}

.fjlc-verify,
.fjlc-verify * {
	box-sizing: border-box;
}

.fjlc-verify {
	width: 100%;
	padding: clamp(32px, 8vw, 90px) 20px;
	color: var(--fjlc-ink);
	background:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--fjlc-accent) 34%, transparent), transparent 25rem),
		#f7fbf8;
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fjlc-verify__card {
	width: min(720px, 100%);
	margin: 0 auto;
	padding: clamp(28px, 6vw, 58px);
	border: 1px solid var(--fjlc-line);
	border-radius: 26px;
	background: #fff;
	box-shadow: 0 25px 70px rgba(7, 82, 61, .13);
}

.fjlc-verify__brand {
	margin-bottom: 14px;
	color: var(--fjlc-primary);
	font-size: .75rem;
	font-weight: 900;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.fjlc-verify h1 {
	margin: 0;
	color: var(--fjlc-ink);
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 900;
	letter-spacing: -.055em;
	line-height: 1;
}

.fjlc-verify h1 + p {
	max-width: 560px;
	margin: 18px 0 0;
	color: var(--fjlc-muted);
}

.fjlc-verify__form {
	margin-top: 30px;
}

.fjlc-verify__form label {
	display: block;
	margin-bottom: 8px;
	font-size: .82rem;
	font-weight: 800;
}

.fjlc-verify__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
}

.fjlc-verify__row input {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var(--fjlc-line);
	border-radius: 12px;
	color: var(--fjlc-ink);
	background: #fff;
	font: inherit;
	text-transform: uppercase;
}

.fjlc-verify__row input:focus {
	border-color: var(--fjlc-primary);
	outline: 3px solid color-mix(in srgb, var(--fjlc-primary) 15%, transparent);
}

.fjlc-verify__row button {
	min-height: 52px;
	padding: 12px 22px;
	border: 0;
	border-radius: 12px;
	color: #fff;
	cursor: pointer;
	background: var(--fjlc-primary);
	font: inherit;
	font-weight: 850;
}

.fjlc-result {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 28px;
	padding: 17px;
	border: 1px solid;
	border-radius: 14px;
}

.fjlc-result__icon {
	display: grid;
	width: 35px;
	height: 35px;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 10px;
	font-weight: 900;
}

.fjlc-result strong {
	display: block;
	font-size: .95rem;
}

.fjlc-result p {
	margin: 3px 0 0;
	font-size: .8rem;
}

.fjlc-result--valid {
	border-color: #b8dacd;
	color: var(--fjlc-primary);
	background: #eef9f4;
}

.fjlc-result--valid .fjlc-result__icon {
	background: var(--fjlc-accent);
}

.fjlc-result--invalid {
	border-color: #edc5c5;
	color: #7e2828;
	background: #fff2f2;
}

.fjlc-result--invalid .fjlc-result__icon {
	background: #ffdcdc;
}

.fjlc-details {
	display: grid;
	gap: 0;
	margin: 20px 0 0;
	border: 1px solid var(--fjlc-line);
	border-radius: 14px;
	overflow: hidden;
}

.fjlc-details div {
	display: grid;
	grid-template-columns: minmax(120px, .42fr) 1fr;
	gap: 20px;
	padding: 13px 15px;
	border-bottom: 1px solid var(--fjlc-line);
}

.fjlc-details div:last-child {
	border-bottom: 0;
}

.fjlc-details dt {
	color: var(--fjlc-muted);
	font-size: .75rem;
	font-weight: 750;
}

.fjlc-details dd {
	margin: 0;
	font-size: .82rem;
	font-weight: 780;
}

@media (max-width: 560px) {
	.fjlc-verify__row,
	.fjlc-details div {
		grid-template-columns: 1fr;
	}

	.fjlc-verify__row button {
		width: 100%;
	}

	.fjlc-details div {
		gap: 3px;
	}
}