.arraysubs-license {
	--license-ink: #172033;
	--license-muted: #5f6f89;
	--license-line: #d8e2ef;
	--license-primary: var(--arraysubs-fb-primary-color, #0073aa);
	--license-primary-rgb: var(--arraysubs-fb-primary-rgb, 0, 115, 170);
	--license-radius: var(--arraysubs-fb-border-radius, 4px);
	--license-success: #0f8f5f;
	--license-surface: #fff;

	width: min(1120px, 100%);

	&__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
		gap: 22px;
		align-items: stretch;
	}

	&__panel,
	&__guide {
		position: relative;
		overflow: hidden;
		border: 1px solid var(--license-line);
		border-radius: var(--license-radius);
		background: var(--license-surface);
		box-shadow: 0 18px 44px rgba(23, 32, 51, 0.08);
	}

	&__panel {
		display: flex;
		flex-direction: column;
		gap: 22px;
		min-height: 310px;
		padding: 34px;

		&::before {
			position: absolute;
			inset: 0;
			background:
				linear-gradient(135deg, rgba(var(--license-primary-rgb), 0.14), transparent 34%),
				linear-gradient(180deg, rgba(245, 250, 253, 0.95), rgba(255, 255, 255, 0.72));
			content: "";
			pointer-events: none;
		}

		> * {
			position: relative;
			z-index: 1;
		}
	}

	&__panel--loading {
		align-items: center;
		justify-content: center;
		min-height: 220px;

		.spinner {
			float: none;
			margin: 0;
		}
	}

	&__panel--active {
		display: grid;
		grid-template-areas:
			"mark copy"
			"mark actions";
		grid-template-columns: auto minmax(0, 1fr);
		gap: 14px 18px;
		align-items: center;
		width: min(680px, 100%);
		min-height: 0;
		padding: 28px;
		background:
			linear-gradient(135deg, rgba(15, 143, 95, 0.12), rgba(255, 255, 255, 0.92) 52%),
			var(--license-surface);
	}

	&__active-mark {
		grid-area: mark;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 56px;
		border: 1px solid rgba(15, 143, 95, 0.25);
		border-radius: var(--license-radius);
		background: #eaf8f1;
		color: var(--license-success);
		box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.58);

		svg {
			width: 28px;
			height: 28px;
			stroke-width: 2.2;
		}
	}

	&__active-copy {
		grid-area: copy;
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-width: 0;
	}

	&__intro {
		max-width: 640px;
	}

	&__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 18px;
		padding: 8px 12px;
		border: 1px solid rgba(var(--license-primary-rgb), 0.2);
		border-radius: 999px;
		background: rgba(var(--license-primary-rgb), 0.08);
		color: var(--license-primary);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;

		svg {
			width: 15px;
			height: 15px;
		}
	}

	&__title {
		margin: 0;
		color: var(--license-ink);
		font-size: 30px;
		font-weight: 750;
		line-height: 1.12;
	}

	&__description {
		max-width: 560px;
		margin: 12px 0 0;
		color: var(--license-muted);
		font-size: 15px;
		line-height: 1.65;
	}

	&__masked-key {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: fit-content;
		max-width: 100%;
		padding: 11px 14px;
		border: 1px solid rgba(15, 143, 95, 0.24);
		border-radius: var(--license-radius);
		background: rgba(255, 255, 255, 0.78);
		color: var(--license-success);

		svg {
			flex: 0 0 auto;
			width: 17px;
			height: 17px;
		}

		code {
			overflow: hidden;
			color: var(--license-ink);
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&__actions {
		grid-area: actions;
		display: flex;
		justify-content: flex-start;
	}

	&__remove.button.button-secondary {
		border-color: #cbd8e7;
		color: #4b5873;
		font-weight: 600;

		&:hover,
		&:focus {
			border-color: #d63638;
			color: #b32d2e;
		}
	}

	&__label {
		color: var(--license-ink);
		font-size: 13px;
		font-weight: 700;
	}

	&__field-row {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	&__input-wrap {
		position: relative;
		flex: 1 1 auto;
		min-width: 260px;
	}

	&__input-icon {
		position: absolute;
		top: 50%;
		left: 14px;
		width: 18px;
		height: 18px;
		color: #718096;
		transform: translateY(-50%);
		pointer-events: none;
	}

	&__input.regular-text {
		width: 100%;
		max-width: none;
		min-height: 44px;
		padding-right: 14px;
		padding-left: 44px;
		border-color: #cbd8e7;
		border-radius: var(--license-radius);
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 13px;
		letter-spacing: 0.02em;
		box-shadow: 0 8px 18px rgba(23, 32, 51, 0.04);

		&:focus {
			border-color: var(--license-primary);
			box-shadow:
				0 0 0 1px var(--license-primary),
				0 10px 24px rgba(var(--license-primary-rgb), 0.12);
		}
	}

	&__activate.button.button-primary {
		min-height: 44px;
		padding: 0 18px;
		border-radius: var(--license-radius);
		font-weight: 700;
	}

	&__guide {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 310px;
		padding: 28px;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.88)),
			repeating-linear-gradient(135deg, rgba(var(--license-primary-rgb), 0.08) 0, rgba(var(--license-primary-rgb), 0.08) 1px, transparent 1px, transparent 14px),
			#f7fbfd;

		h3 {
			position: relative;
			z-index: 1;
			margin: 0 0 10px;
			color: var(--license-ink);
			font-size: 18px;
			line-height: 1.3;
		}

		p {
			position: relative;
			z-index: 1;
			max-width: 260px;
			margin: 0;
			color: var(--license-muted);
			font-size: 14px;
			line-height: 1.6;
		}
	}

	@media (max-width: 960px) {

		&__grid {
			grid-template-columns: 1fr;
		}

		&__guide {
			min-height: 180px;
		}
	}

	@media (max-width: 782px) {

		&__panel {
			min-height: 0;
			padding: 24px;
			border-radius: var(--license-radius);
		}

		&__panel--active {
			grid-template-areas:
				"mark"
				"copy"
				"actions";
			grid-template-columns: 1fr;
			gap: 16px;
		}

		&__active-mark {
			width: 52px;
			height: 52px;
			border-radius: var(--license-radius);
		}

		&__title {
			font-size: 24px;
		}

		&__field-row {
			align-items: stretch;
			flex-direction: column;
		}

		&__input-wrap {
			min-width: 0;
		}

		&__activate.button.button-primary {
			justify-content: center;
			width: 100%;
		}

		&__actions {
			justify-content: flex-start;
		}

		&__guide {
			min-height: 160px;
			padding: 24px;
			border-radius: var(--license-radius);
		}
	}
}
