/**
 * Fillaro admin. Everything is scoped to .pf-admin so wp-admin styles
 * and ours never collide.
 */

.pf-admin {
	--a-brand: #6b4dff;
	--a-brand-strong: #5636f2;
	--a-brand-soft: #f1edff;
	--a-ink: #101828;
	--a-text: #344054;
	--a-muted: #667085;
	--a-subtle: #98a2b3;
	--a-border: #e4e7ec;
	--a-border-strong: #d0d5dd;
	--a-bg: #f6f7f9;
	--a-surface: #fff;
	--a-hover: #f2f4f7;
	--a-danger: #d92d20;
	--a-danger-soft: #fef3f2;
	--a-success: #079455;
	--a-radius: 10px;
	--a-radius-lg: 14px;
	--a-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	--a-shadow-lg: 0 20px 48px -12px rgba(16, 24, 40, 0.22);
	--a-ring: 0 0 0 4px rgba(107, 77, 255, 0.18);
	--a-top: 32px;

	color: var(--a-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	:where(h1, h2, h3, p) {
		margin: 0;
		padding: 0;
	}

	:where(a) {
		color: inherit;
		text-decoration: none;
	}

	button {
		font-family: inherit;
	}

	:focus-visible {
		outline: none;
		box-shadow: var(--a-ring);
	}
}

@media (max-width: 782px) {

	.pf-admin {
		--a-top: 46px;
	}
}

/* Full-bleed app inside wp-admin. */
.fillaro-screen {
	background: #f6f7f9;

	#wpcontent {
		padding-left: 0;
	}

	#wpbody-content {
		padding-bottom: 0;
	}

	#wpfooter {
		display: none;
	}

	#wpbody-content > .notice,
	#wpbody-content > .error,
	#wpbody-content > .updated,
	#wpbody-content > .update-nag {
		display: none;
	}
}

body.pf-modal-open {
	overflow: hidden;
}

.pf-admin-boot {
	display: grid;
	place-items: center;
	height: 60vh;
}

.pf-admin-boot__dot,
.pf-loading__ring {
	width: 28px;
	height: 28px;
	border: 3px solid #e4e7ec;
	border-top-color: #6b4dff;
	border-radius: 50%;
	animation: pfa-spin 0.8s linear infinite;
}

.pf-loading {
	display: grid;
	place-items: center;
	padding: 64px 0;
}

@keyframes pfa-spin {

	to {
		transform: rotate(360deg);
	}
}

/* ---------- Shell ---------- */

.pf-shell {
	min-height: calc(100vh - var(--a-top));
	background: var(--a-bg);
}

.pf-topbar {
	position: sticky;
	top: var(--a-top);
	z-index: 20;
	display: flex;
	gap: 28px;
	align-items: center;
	height: 60px;
	padding: 0 28px;
	background: rgba(255, 255, 255, 0.92);
	border-bottom: 1px solid var(--a-border);
	backdrop-filter: blur(8px);
}

.pf-brand {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var(--a-ink);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pf-logo {
	display: block;
	flex: none;
}

.pf-nav {
	display: flex;
	gap: 4px;
}

.pf-nav__link {
	padding: 7px 12px;
	color: var(--a-muted);
	font-weight: 500;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s;

	&:hover {
		color: var(--a-ink);
		background: var(--a-hover);
	}

	&.is-active {
		color: var(--a-ink);
		background: var(--a-hover);
	}
}

.pf-topbar__end {
	margin-left: auto;
}

.pf-main {
	padding: 32px 32px 80px;
}

.pf-page {
	max-width: 1200px;
	margin: 0 auto;
}

.pf-page--narrow {
	max-width: 760px;
}

.pf-page__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
}

.pf-page__title {
	color: var(--a-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.pf-page__sub {
	margin-top: 4px;
	color: var(--a-muted);
}

.pf-page__actions {
	display: flex;
	gap: 8px;
}

/* ---------- Primitives ---------- */

.pf-btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;

	&:disabled {
		cursor: default;
		opacity: 0.55;
	}

	&.is-loading {
		opacity: 1;
		cursor: progress;
	}
}

.pf-btn--sm {
	height: 32px;
	padding: 0 11px;
	font-size: 13px;
}

.pf-btn--primary {
	color: #fff;
	background: var(--a-brand);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12);

	&:hover:not(:disabled) {
		color: #fff;
		background: var(--a-brand-strong);
	}
}

.pf-btn--secondary {
	color: var(--a-text);
	background: var(--a-surface);
	border-color: var(--a-border-strong);
	box-shadow: var(--a-shadow);

	&:hover:not(:disabled) {
		color: var(--a-ink);
		background: var(--a-hover);
	}

	&.is-starred {
		color: #b54708;
		background: #fffaeb;
		border-color: #fedf89;
	}
}

.pf-btn--danger {
	color: #fff;
	background: var(--a-danger);

	&:hover:not(:disabled) {
		background: #b42318;
	}
}

.pf-btn--ghost-danger {
	color: var(--a-danger);
	background: transparent;

	&:hover:not(:disabled) {
		background: var(--a-danger-soft);
	}
}

.pf-btn__spinner {
	width: 15px;
	height: 15px;
	border: 2px solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pfa-spin 0.7s linear infinite;
}

.pf-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--a-muted);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;

	&:hover:not(:disabled) {
		color: var(--a-ink);
		background: var(--a-hover);
	}

	&:disabled {
		cursor: default;
		opacity: 0.35;
	}
}

.pf-iconbtn--danger:hover:not(:disabled) {
	color: var(--a-danger);
	background: var(--a-danger-soft);
}

.pf-link {
	padding: 0;
	color: var(--a-brand);
	font-size: 13px;
	font-weight: 600;
	background: none;
	border: 0;
	cursor: pointer;

	&:hover {
		color: var(--a-brand-strong);
		text-decoration: underline;
	}
}

.pf-muted {
	color: var(--a-muted);
}

.pf-hint {
	margin-top: 6px;
	color: var(--a-muted);
	font-size: 12.5px;
	line-height: 1.45;
}

.pf-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 999px;
}

.pf-badge--neutral {
	color: var(--a-muted);
	background: var(--a-hover);
	border: 1px solid var(--a-border);
}

.pf-badge--success {
	color: var(--a-success);
	background: #ecfdf3;
	border: 1px solid #abefc6;
}

.pf-badge--warning {
	color: #b54708;
	background: #fffaeb;
	border: 1px solid #fedf89;
}

.pf-badge--danger {
	color: var(--a-danger);
	background: var(--a-danger-soft);
	border: 1px solid #fecdca;
}

.pf-card {
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: var(--a-radius-lg);
	box-shadow: var(--a-shadow);
}

.pf-card--flush {
	overflow: hidden;
}

.pf-section {
	margin-bottom: 20px;
	padding: 24px;
}

.pf-section__h {
	margin-bottom: 14px;
	color: var(--a-ink);
	font-size: 16px;
	font-weight: 650;
}

.pf-section__h:has(+ .pf-section__p) {
	margin-bottom: 0;
}

.pf-section__p {
	max-width: 62ch;
	margin-top: 4px;
	margin-bottom: 18px;
	color: var(--a-muted);
}

.pf-section__body {
	display: grid;
	gap: 16px;
}

.pf-section > .pf-ctl + .pf-ctl,
.pf-section > .pf-toggle-row + .pf-toggle-row {
	margin-top: 16px;
}

.pf-grid-2,
.pf-grid-3 {
	display: grid;
	gap: 14px;
}

.pf-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-savebar {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
}

.pf-savebar__note {
	color: var(--a-muted);
	font-size: 13px;
}

/* Settings with a side menu. */
.pf-page--settings {
	max-width: 1040px;
}

.pf-sections {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.pf-sections__nav {
	position: sticky;
	top: calc(var(--a-top) + 16px);
}

.pfb-settings .pf-sections__nav {
	top: 0;
}

.pf-sections__group {
	margin-bottom: 14px;

	ul {
		display: grid;
		gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		margin: 0;
	}
}

.pf-sections__glabel {
	display: block;
	margin: 0 0 6px 10px;
	color: var(--a-subtle);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pf-sections__item {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 8px 10px;
	color: var(--a-text);
	font: inherit;
	font-size: 13.5px;
	text-align: start;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	svg {
		flex: none;
		color: var(--a-muted);
	}

	&:hover {
		background: var(--a-hover);
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--a-ring);
	}

	&.is-active {
		color: var(--a-brand-strong);
		font-weight: 600;
		background: var(--a-brand-soft);

		svg {
			color: var(--a-brand);
		}
	}
}

.pf-sections__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pf-sections__status {
	flex: none;
	padding: 1px 7px;
	color: var(--a-muted);
	font-size: 11px;
	font-weight: 600;
	background: var(--a-hover);
	border-radius: 999px;

	&.is-success {
		color: var(--a-success);
		background: #ecfdf3;
	}

	&.is-warning {
		color: #b54708;
		background: #fffaeb;
	}

	&.is-danger {
		color: var(--a-danger);
		background: var(--a-danger-soft);
	}
}

.pf-sections__pick {
	display: none;
}

.pf-sections__main {
	display: grid;
	gap: 16px;
	min-width: 0;

	> .pf-section {
		margin: 0;
	}

	> .pf-savebar {
		position: sticky;
		bottom: 0;
		padding: 12px 0;
		background: linear-gradient(to bottom, transparent, var(--a-bg) 35%);
	}
}

@media (max-width: 782px) {

	.pf-sections {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.pf-sections__nav {
		position: static;
	}

	.pf-sections__list {
		display: none;
	}

	.pf-sections__pick {
		display: block;
	}
}

/* Form controls. */
.pf-ctl {
	display: block;
	min-width: 0;
}

.pf-ctl__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 6px;
}

.pf-ctl__label,
.pf-toggle-row__label {
	color: var(--a-ink);
	font-size: 13px;
	font-weight: 600;
}

.pf-admin .pf-text {
	display: block;
	width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 8px 11px;
	color: var(--a-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	background: var(--a-surface);
	border: 1px solid var(--a-border-strong);
	border-radius: 8px;
	box-shadow: var(--a-shadow);
	transition: border-color 0.15s, box-shadow 0.15s;

	&:focus {
		border-color: var(--a-brand);
		outline: none;
		box-shadow: var(--a-ring);
	}

	&::placeholder {
		color: var(--a-subtle);
	}
}

.pf-admin textarea.pf-text {
	resize: vertical;
}

/* Dropdown (replaces native selects). */
.pf-dd {
	position: relative;
	min-width: 0;
}

.pf-admin .pf-dd__trigger {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 100%;
	min-height: 38px;
	margin: 0;
	padding: 8px 10px 8px 11px;
	color: var(--a-ink);
	font: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-align: start;
	background: var(--a-surface);
	border: 1px solid var(--a-border-strong);
	border-radius: 8px;
	box-shadow: var(--a-shadow);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;

	svg {
		flex: none;
		color: var(--a-muted);
		transition: transform 0.15s;
	}

	&:focus-visible,
	&[aria-expanded="true"] {
		border-color: var(--a-brand);
		outline: none;
		box-shadow: var(--a-ring);
	}

	&[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	&:disabled {
		cursor: not-allowed;
		opacity: 0.55;
	}
}

.pf-dd__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&.is-placeholder {
		color: var(--a-subtle);
	}
}

.pf-dd__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: max(100%, 240px);
	max-width: min(420px, calc(100vw - 32px));
	max-height: 340px;
	overflow: hidden;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 12px;
	box-shadow: var(--a-shadow-lg);
	animation: pfa-in 0.12s ease-out;
}

.pf-dd__search {
	display: flex;
	flex: none;
	gap: 8px;
	align-items: center;
	padding: 0 12px;
	color: var(--a-muted);
	border-bottom: 1px solid var(--a-border);

	input,
	.pf-admin & input {
		flex: 1;
		min-width: 0;
		min-height: 42px;
		padding: 0;
		color: var(--a-ink);
		font: inherit;
		font-size: 14px;
		background: none;
		border: 0;
		box-shadow: none;
		outline: none;
	}
}

.pf-admin .pf-dd__list {
	flex: 1;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	outline: none;
	scrollbar-width: thin;
}

.pf-admin .pf-dd__option {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 8px 10px;
	color: var(--a-text);
	font-size: 13.5px;
	border-radius: 7px;
	cursor: pointer;

	> svg {
		flex: none;
		color: var(--a-brand);
	}

	&.is-active {
		background: var(--a-hover);
	}

	&.is-selected {
		color: var(--a-brand-strong);
		font-weight: 600;
	}
}

.pf-dd__text {
	display: grid;
	flex: 1;
	min-width: 0;
}

.pf-dd__label {
	display: flex;
	gap: 8px;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pf-dd__meta {
	color: var(--a-muted);
	font-size: 12px;
	font-weight: 400;
}

.pf-dd__dot {
	flex: none;
	width: 8px;
	height: 8px;
	background: var(--a-brand);
	border-radius: 50%;
}

.pf-admin .pf-dd__empty {
	margin: 0;
	padding: 14px 10px;
	color: var(--a-muted);
	font-size: 13px;
	text-align: center;
}

/* Page-title variant: the form switcher on Entries. */
.pf-admin .pf-dd--title {
	display: inline-block;
	max-width: 100%;

	.pf-dd__trigger {
		min-height: 0;
		margin-left: -8px;
		padding: 2px 8px;
		font-size: 26px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.02em;
		background: none;
		border-color: transparent;
		box-shadow: none;

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

		&:hover {
			background: var(--a-hover);
		}
	}

	.pf-dd__pop {
		width: 380px;
		max-height: 420px;
		letter-spacing: 0;
	}
}

.pf-admin .pf-select-ctl {
	max-width: none;
	padding-right: 34px;
	background: var(--a-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
	appearance: none;
}

.pf-toggle-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
}

.pf-switch {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	margin-top: 1px;
	padding: 0;
	background: var(--a-border-strong);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s;

	&.is-on {
		background: var(--a-brand);
	}

	&:disabled {
		cursor: default;
		opacity: 0.5;
	}
}

.pf-switch__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
	transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1);

	.is-on > & {
		transform: translateX(16px);
	}
}

.pf-seg {
	display: flex;
	padding: 3px;
	background: var(--a-hover);
	border: 1px solid var(--a-border);
	border-radius: 9px;
}

.pf-seg__opt {
	display: inline-flex;
	flex: 1;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	overflow: hidden;
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 550;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;

	&:hover {
		color: var(--a-ink);
	}

	&.is-active {
		color: var(--a-ink);
		background: var(--a-surface);
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
	}
}

.pf-color {
	display: grid;
	grid-template-columns: 32px 1fr 88px;
	gap: 10px;
	align-items: center;
}

.pf-color__swatch {
	position: relative;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.14);
	cursor: pointer;

	input {
		position: absolute;
		inset: -8px;
		width: 48px;
		height: 48px;
		opacity: 0;
		cursor: pointer;
	}

	&:focus-within {
		box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.14), var(--a-ring);
	}
}

.pf-color__label {
	color: var(--a-text);
	font-size: 13px;
	font-weight: 500;
}

.pf-admin .pf-color__hex {
	width: 100%;
	height: 32px;
	padding: 0 8px;
	color: var(--a-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px;
	text-transform: lowercase;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 7px;

	&:focus {
		border-color: var(--a-brand);
		outline: none;
		box-shadow: var(--a-ring);
	}
}

.pf-range__value {
	color: var(--a-muted);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

.pf-admin .pf-range {
	width: 100%;
	height: 4px;
	margin: 10px 0 6px;
	background: linear-gradient(to right, var(--a-brand) var(--pf-range-pct), var(--a-border) var(--pf-range-pct));
	border-radius: 99px;
	appearance: none;

	&::-webkit-slider-thumb {
		width: 18px;
		height: 18px;
		background: #fff;
		border: 1px solid var(--a-border-strong);
		border-radius: 50%;
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
		cursor: grab;
		appearance: none;
	}

	&::-moz-range-thumb {
		width: 18px;
		height: 18px;
		background: #fff;
		border: 1px solid var(--a-border-strong);
		border-radius: 50%;
		cursor: grab;
	}
}

.pf-search {
	display: flex;
	gap: 8px;
	align-items: center;
	width: 260px;
	height: 38px;
	padding: 0 12px;
	color: var(--a-subtle);
	background: var(--a-surface);
	border: 1px solid var(--a-border-strong);
	border-radius: 9px;
	box-shadow: var(--a-shadow);

	&:focus-within {
		border-color: var(--a-brand);
		box-shadow: var(--a-ring);
	}

	input {
		flex: 1;
		min-width: 0;
		height: 100%;
		padding: 0;
		color: var(--a-ink);
		font-size: 14px;
		background: transparent;
		border: 0;
		outline: none;
		box-shadow: none;

		&:focus {
			box-shadow: none;
		}
	}
}

.pf-search--block {
	width: auto;
	margin: 0 16px 8px;
}

.pf-copy {
	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	overflow: hidden;
	background: var(--a-hover);
	border: 1px solid var(--a-border);
	border-radius: 8px;
}

.pf-copy__value {
	padding: 5px 9px;
	overflow: hidden;
	color: var(--a-text);
	font-size: 12.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: none;
}

.pf-copy__btn {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	padding: 0 10px;
	color: var(--a-muted);
	font-size: 12px;
	font-weight: 600;
	background: var(--a-surface);
	border: 0;
	border-left: 1px solid var(--a-border);
	cursor: pointer;

	&:hover {
		color: var(--a-ink);
	}

	&.is-copied {
		color: var(--a-success);
	}
}

.pf-menu {
	position: relative;
}

.pf-menu__list {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	z-index: 30;
	min-width: 180px;
	padding: 6px;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 12px;
	box-shadow: var(--a-shadow-lg);
	animation: pfa-in 0.12s ease-out;
}

.pf-menu__item {
	display: flex;
	gap: 10px;
	align-items: center;
	width: 100%;
	padding: 8px 10px;
	color: var(--a-text);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	background: none;
	border: 0;
	border-radius: 7px;
	cursor: pointer;

	&:hover,
	&:focus-visible {
		color: var(--a-ink);
		background: var(--a-hover);
		box-shadow: none;
	}

	&.is-danger {
		color: var(--a-danger);

		&:hover {
			background: var(--a-danger-soft);
		}
	}
}

@keyframes pfa-in {

	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
}

.pf-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 56px 24px;
	text-align: center;
}

.pf-empty__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	color: var(--a-brand);
	background: var(--a-brand-soft);
	border-radius: 16px;
}

.pf-empty__title {
	color: var(--a-ink);
	font-size: 17px;
	font-weight: 650;
}

.pf-empty__text {
	max-width: 44ch;
	margin: 6px 0 20px;
	color: var(--a-muted);
}

/* Modal. */
.pf-modal-layer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 24px;
}

.pf-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.45);
	backdrop-filter: blur(3px);
	animation: pfa-fade 0.15s ease-out;
}

@keyframes pfa-fade {

	from {
		opacity: 0;
	}
}

.pf-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100vh - 48px);
	background: var(--a-surface);
	border-radius: 16px;
	box-shadow: var(--a-shadow-lg);
	outline: none;
	animation: pfa-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pfa-pop {

	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

.pf-modal--sm {
	max-width: 440px;
}

.pf-modal--md {
	max-width: 560px;
}

.pf-modal--lg {
	max-width: 920px;
}

.pf-modal__head {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px 20px 0 24px;
}

.pf-modal__title {
	color: var(--a-ink);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.pf-modal__desc {
	margin-top: 4px;
	color: var(--a-muted);
}

.pf-modal__body {
	padding: 20px 24px 24px;
	overflow-y: auto;
}

.pf-modal__text {
	color: var(--a-text);
}

.pf-modal__foot {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 16px 24px;
	background: #fcfcfd;
	border-top: 1px solid var(--a-border);
	border-radius: 0 0 16px 16px;
}

/* Toasts. */
.pf-toasts {
	position: fixed;
	bottom: 24px;
	left: 50%;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	transform: translateX(-50%);
	pointer-events: none;
}

.pf-toast {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 10px 16px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	background: #101828;
	border-radius: 10px;
	box-shadow: var(--a-shadow-lg);
	animation: pfa-pop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);

	.pf-icon {
		color: #75e0a7;
	}
}

.pf-toast--error {
	background: #b42318;

	.pf-icon {
		color: #fff;
	}
}

/* ---------- Forms list ---------- */

.pf-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.pf-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: var(--a-radius-lg);
	box-shadow: var(--a-shadow);
}

.pf-stat__label {
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 500;
}

.pf-stat__value {
	color: var(--a-ink);
	line-height: 1.25;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.pf-stat__note {
	color: var(--a-muted);
	font-size: 12.5px;
}

.pf-table {
	width: 100%;
	border-collapse: collapse;

	th {
		padding: 11px 16px;
		color: var(--a-muted);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-align: left;
		text-transform: uppercase;
		background: #fcfcfd;
		border-bottom: 1px solid var(--a-border);
	}

	td {
		padding: 14px 16px;
		vertical-align: middle;
		border-bottom: 1px solid var(--a-border);
	}

	tbody tr:last-child td {
		border-bottom: 0;
	}

	tbody tr {
		transition: background 0.1s;

		&:hover {
			background: #fafafb;
		}
	}

	.is-num {
		text-align: right;
		font-variant-numeric: tabular-nums;
	}
}

.pf-table-empty {
	padding: 24px;
	color: var(--a-muted);
	text-align: center;
}

.pf-form-title {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--a-ink);
	font-size: 14.5px;
	font-weight: 600;

	&:hover .pf-form-title__text {
		color: var(--a-brand);
	}
}

.pf-form-sub {
	display: block;
	margin: 2px 0 0 20px;
	color: var(--a-subtle);
	font-size: 12.5px;
}

.pf-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, #fff), 0 0 0 4px rgba(16, 24, 40, 0.08);
}

.pf-count {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: var(--a-ink);
	font-weight: 600;

	&:hover {
		color: var(--a-brand);
	}
}

.pf-count__new {
	padding: 1px 7px;
	color: var(--a-brand-strong);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--a-brand-soft);
	border-radius: 99px;
}

.pf-row-actions {
	width: 1%;
	white-space: nowrap;

	> * {
		display: inline-block;
		vertical-align: middle;
	}
}

/* Template picker. */
.pf-tpls {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.pf-tpl {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;

	&:hover:not(:disabled) {
		border-color: var(--a-brand);
		box-shadow: 0 8px 24px -10px rgba(107, 77, 255, 0.45);
		transform: translateY(-2px);
	}

	&:disabled:not(.is-busy) {
		opacity: 0.6;
	}
}

.pf-tpl__art {
	display: grid;
	place-items: center;
	height: 150px;
	border-bottom: 1px solid var(--a-border);
}

.pf-tpl__blank {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: var(--a-muted);
	border: 2px dashed var(--a-border-strong);
	border-radius: 14px;
}

.pf-tpl__mock {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: 62%;
	padding: 14px;
	background: color-mix(in srgb, var(--f) 70%, transparent);
	border-radius: var(--r);
	box-shadow: 0 6px 18px -8px rgba(16, 24, 40, 0.25);
}

.pf-tpl__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pf-tpl__lbl {
	height: 4px;
	border-radius: 2px;
	opacity: 0.55;
}

.pf-tpl__inp {
	height: 12px;
	background: var(--f);
	border: 1px solid var(--b);
	border-radius: calc(var(--r) * 0.6);
}

.pf-tpl__btn {
	height: 13px;
	margin-top: 3px;
	background: var(--c);
	border-radius: calc(var(--r) * 0.6);
}

.pf-tpl__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 16px;
}

.pf-tpl__title {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--a-ink);
	font-size: 14.5px;
	font-weight: 650;

	.pf-icon {
		color: var(--a-brand);
	}
}

.pf-tpl__desc {
	color: var(--a-muted);
	font-size: 13px;
}

.pf-tpl__busy {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--a-brand);
	background: rgba(255, 255, 255, 0.7);
}

/* ---------- Entries ---------- */

.pf-entries__title {
	min-width: 0;
}

.pf-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;

	select {
		max-width: 100%;
		min-height: 0;
		margin: 0;
		padding: 0 30px 0 0;
		overflow: hidden;
		color: var(--a-ink);
		font-size: 26px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.02em;
		text-overflow: ellipsis;
		background: none;
		border: 0;
		box-shadow: none;
		cursor: pointer;
		appearance: none;

		&:focus {
			box-shadow: var(--a-ring);
		}
	}

	.pf-icon {
		position: absolute;
		right: 4px;
		color: var(--a-muted);
		pointer-events: none;
	}
}

.pf-overview {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 16px;
	margin-bottom: 20px;
}

.pf-stats--stack {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
}

.pf-entries.has-drawer .pf-overview {
	grid-template-columns: 1fr;
}

.pf-chart-card {
	padding: 16px 18px 12px;
}

.pf-chart {
	margin: 0;
}

.pf-chart__cap {
	margin-bottom: 8px;
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 500;
}

.pf-chart__svg {
	display: block;
	width: 100%;
	height: 64px;

	rect {
		fill: var(--a-border);
		transition: fill 0.15s;

		&.is-on {
			fill: var(--a-brand);
		}

		&:hover {
			fill: var(--a-brand-strong);
		}
	}
}

.pf-chart__axis {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--a-subtle);
	font-size: 11.5px;
}

.pf-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--a-border);
}

.pf-filters {
	display: flex;
	gap: 4px;
}

.pf-filter {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	height: 32px;
	padding: 0 11px;
	color: var(--a-muted);
	font-size: 13.5px;
	font-weight: 550;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	&:hover {
		color: var(--a-ink);
		background: var(--a-hover);
	}

	&.is-active {
		color: var(--a-ink);
		background: var(--a-hover);
	}
}

.pf-filter__count {
	min-width: 20px;
	padding: 0 6px;
	color: var(--a-muted);
	font-size: 11.5px;
	line-height: 18px;
	text-align: center;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 99px;
}

.pf-bulk {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;

	strong {
		margin-right: 4px;
		color: var(--a-ink);
	}
}

.pf-entries-table {

	tbody tr {
		cursor: pointer;
	}

	tr.is-unread td {
		color: var(--a-ink);
		font-weight: 600;
	}

	tr.is-open {
		background: var(--a-brand-soft) !important;
	}

	td {
		max-width: 280px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	input[type="checkbox"] {
		margin: 0;
	}
}

.pf-col-check,
.pf-col-star {
	width: 1%;
	padding-right: 0 !important;
}

.pf-col-date {
	width: 1%;
	white-space: nowrap;
}

.pf-col-main {
	position: relative;
}

.pf-cell-btn {
	max-width: 100%;
	padding: 0;
	overflow: hidden;
	color: inherit;
	font: inherit;
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: none;
	border: 0;
	cursor: pointer;
}

.pf-unread-dot {
	position: absolute;
	top: 50%;
	left: 4px;
	width: 7px;
	height: 7px;
	background: var(--a-brand);
	border-radius: 50%;
	transform: translateY(-50%);
}

.pf-star {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--a-border-strong);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;

	&:hover {
		color: #f79009;
	}

	&.is-on {
		color: #f79009;
	}
}

.pf-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	font-size: 13px;
	border-top: 1px solid var(--a-border);
}

.pf-pager__info {
	min-width: 110px;
	color: var(--a-muted);
	font-variant-numeric: tabular-nums;
}

.pf-pager__pages {
	display: flex;
	gap: 2px;
	align-items: center;
}

.pf-admin .pf-pager__num {
	min-width: 32px;
	height: 32px;
	padding: 0 6px;
	color: var(--a-text);
	font: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	background: none;
	border: 0;
	border-radius: 8px;
	cursor: pointer;

	&:hover {
		background: var(--a-hover);
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--a-ring);
	}

	&.is-current {
		color: var(--a-brand-strong);
		font-weight: 700;
		background: var(--a-brand-soft);
	}
}

.pf-pager__gap {
	min-width: 20px;
	color: var(--a-subtle);
	text-align: center;
}

.pf-pager__size {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--a-muted);

	.pf-dd {
		width: 76px;
	}

	.pf-dd__trigger {
		min-height: 32px;
		padding-block: 4px;
		font-size: 13px;
	}

	.pf-dd__pop {
		top: auto;
		bottom: calc(100% + 6px);
		width: 120px;
	}
}

/* List filters. */
.pf-toolbar__end {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pf-quick {
	display: flex;
	gap: 6px;
}

.pf-admin .pf-quick__btn {
	height: 32px;
	padding: 0 11px;
	color: var(--a-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	background: var(--a-surface);
	border: 1px solid var(--a-border-strong);
	border-radius: 999px;
	cursor: pointer;

	&:hover {
		background: var(--a-hover);
	}

	&.is-on {
		color: var(--a-brand-strong);
		background: var(--a-brand-soft);
		border-color: color-mix(in srgb, var(--a-brand) 40%, transparent);
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--a-ring);
	}
}

.pf-sort {
	width: 160px;

	.pf-dd__pop {
		right: 0;
		left: auto;
	}
}

.pf-daterange {
	width: 170px;
}

.pf-entryfilters {
	padding: 10px 16px;
	border-bottom: 1px solid var(--a-border);
}

.pf-entryfilters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;

	.pf-dd__trigger {
		min-height: 34px;
		padding-block: 5px;
		font-size: 13px;
	}

	.pf-sort {
		margin-left: auto;
	}
}

.pf-dates {
	display: flex;
	gap: 6px;
	align-items: center;
	color: var(--a-subtle);

	.pf-text {
		width: 150px;
		min-height: 34px;
		padding-block: 5px;
		font-size: 13px;
	}
}

.pf-addfilter {
	position: relative;
}

.pf-addfilter__pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 35;
	display: grid;
	gap: 8px;
	width: 300px;
	padding: 12px;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 12px;
	box-shadow: var(--a-shadow-lg);
	animation: pfa-in 0.12s ease-out;
}

.pf-addfilter__foot {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}

.pf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin-top: 10px;
}

.pf-chip {
	display: inline-flex;
	gap: 2px;
	align-items: center;
	max-width: 100%;
	height: 28px;
	padding: 0 4px 0 10px;
	color: var(--a-brand-strong);
	font-size: 12.5px;
	font-weight: 500;
	background: var(--a-brand-soft);
	border-radius: 999px;
}

.pf-chip__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pf-admin .pf-chip__x {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;

	&:hover {
		background: color-mix(in srgb, var(--a-brand) 15%, transparent);
	}

	&:focus-visible {
		outline: none;
		box-shadow: var(--a-ring);
	}
}

.pf-admin .pf-chips__clear {
	margin-left: 4px;
	font-size: 12.5px;
}

@media (max-width: 782px) {

	.pf-entryfilters__row .pf-sort {
		margin-left: 0;
	}

	.pf-sort,
	.pf-daterange {
		width: auto;
		min-width: 140px;
	}

	.pf-pager__info {
		width: 100%;
	}
}

.pf-drawer {
	position: fixed;
	top: var(--a-top);
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	width: min(460px, 100vw);
	overflow-y: auto;
	background: var(--a-surface);
	border-left: 1px solid var(--a-border);
	box-shadow: -24px 0 48px -24px rgba(16, 24, 40, 0.25);
	animation: pfa-slide 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes pfa-slide {

	from {
		transform: translateX(24px);
		opacity: 0;
	}
}

.pf-entries.has-drawer {
	padding-right: min(460px, 40vw);
	transition: padding 0.2s;
}

.pf-drawer__head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	justify-content: space-between;
	padding: 20px 16px 12px 24px;
}

.pf-drawer__title {
	color: var(--a-ink);
	font-size: 18px;
	font-weight: 700;
}

.pf-drawer__sub {
	margin-top: 2px;
	color: var(--a-muted);
	font-size: 13px;
}

.pf-drawer__tools {
	display: flex;
}

.pf-drawer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 24px 16px;
	border-bottom: 1px solid var(--a-border);
}

.pf-answers {
	margin: 0;
	padding: 8px 24px;
}

.pf-answer {
	padding: 14px 0;
	border-bottom: 1px solid var(--a-border);

	&:last-child {
		border-bottom: 0;
	}

	dt {
		margin-bottom: 4px;
		color: var(--a-muted);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	dd {
		margin: 0;
		color: var(--a-ink);
		font-size: 14.5px;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
}

.pf-meta {
	margin-top: auto;
	padding: 16px 24px 24px;
	background: #fcfcfd;
	border-top: 1px solid var(--a-border);

	dl {
		display: grid;
		grid-template-columns: 90px 1fr;
		gap: 8px 12px;
		margin: 0;
		font-size: 13px;
	}

	dt {
		color: var(--a-muted);
	}

	dd {
		margin: 0;
		overflow-wrap: anywhere;
	}
}

.pf-meta__title {
	margin-bottom: 10px;
	color: var(--a-ink);
	font-size: 13px;
	font-weight: 650;
}

.pf-meta__ua {
	color: var(--a-muted);
	font-size: 12px;
}

/* ---------- Builder ---------- */

.pfb {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--a-top));
	background: var(--a-bg);
}

.pfb-error {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding: 80px 24px;
}

.pfb-bar {
	position: relative;
	z-index: 10;
	display: grid;
	flex: none;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	height: 60px;
	padding: 0 16px;
	background: var(--a-surface);
	border-bottom: 1px solid var(--a-border);
}

.pfb-bar__start,
.pfb-bar__end {
	display: flex;
	gap: 6px;
	align-items: center;
	min-width: 0;
}

.pfb-bar__end {
	justify-content: flex-end;
}

.pf-admin .pfb-title {
	width: 100%;
	max-width: 340px;
	height: 36px;
	padding: 0 10px;
	overflow: hidden;
	color: var(--a-ink);
	font-size: 15px;
	font-weight: 650;
	text-overflow: ellipsis;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: none;

	&:hover {
		border-color: var(--a-border);
	}

	&:focus {
		background: var(--a-surface);
		border-color: var(--a-brand);
		outline: none;
		box-shadow: var(--a-ring);
	}
}

.pfb-tabs {
	display: flex;
	padding: 3px;
	background: var(--a-hover);
	border: 1px solid var(--a-border);
	border-radius: 10px;
}

.pfb-tab {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	height: 32px;
	padding: 0 14px;
	color: var(--a-muted);
	font-size: 13.5px;
	font-weight: 600;
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;

	&:hover {
		color: var(--a-ink);
	}

	&.is-active {
		color: var(--a-ink);
		background: var(--a-surface);
		box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
	}
}

.pfb-sep {
	width: 1px;
	height: 22px;
	margin: 0 4px;
	background: var(--a-border);
}

.pfb-status {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	height: 32px;
	padding: 0 11px;
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 600;
	background: var(--a-hover);
	border: 1px solid var(--a-border);
	border-radius: 99px;
	cursor: pointer;

	&.is-live {
		color: #067647;
		background: #ecfdf3;
		border-color: #abefc6;
	}
}

.pfb-status__dot {
	width: 7px;
	height: 7px;
	background: currentcolor;
	border-radius: 50%;
}

.pfb-save {
	min-width: 84px;
}

.pfb-body {
	display: grid;
	flex: 1;
	grid-template-columns: 290px minmax(0, 1fr);
	min-height: 0;

	&.has-inspector {
		grid-template-columns: 290px minmax(0, 1fr) 340px;
	}
}

.pfb-body--settings {
	display: block;
	overflow-y: auto;
}

.pfb-side {
	min-height: 0;
	overflow-y: auto;
	background: var(--a-surface);
	scrollbar-width: thin;
}

.pfb-side--left {
	border-right: 1px solid var(--a-border);
}

.pfb-side--right {
	border-left: 1px solid var(--a-border);
	animation: pfa-slide 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pfb-panel-head {
	padding: 18px 16px 12px;
}

.pfb-panel-title {
	color: var(--a-ink);
	font-size: 15px;
	font-weight: 650;
}

.pfb-panel-sub {
	margin-top: 2px;
	color: var(--a-muted);
	font-size: 12.5px;
}

/* Palette. */
.pfb-pal__group {
	padding: 10px 14px 6px;
}

.pfb-pal__heading {
	margin-bottom: 8px;
	color: var(--a-subtle);
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pfb-pal__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.pfb-pal__item {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	min-height: 40px;
	padding: 6px 8px;
	color: var(--a-text);
	font-size: 12.5px;
	font-weight: 550;
	line-height: 1.2;
	text-align: left;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 9px;
	cursor: grab;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
	touch-action: none;

	&:hover {
		color: var(--a-ink);
		border-color: var(--a-brand);
		box-shadow: 0 2px 8px -2px rgba(107, 77, 255, 0.25);
	}

	&:active {
		cursor: grabbing;
	}

	&.is-dragging {
		opacity: 0.4;
	}

	&.is-ghost {
		width: 180px;
		border-color: var(--a-brand);
		box-shadow: var(--a-shadow-lg);
		transform: rotate(-2deg);
		cursor: grabbing;
	}
}

.pfb-pal__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--a-brand);
	background: var(--a-brand-soft);
	border-radius: 6px;
}

.pfb-pal__label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Canvas. */
.pfb-canvas {
	min-height: 0;
	overflow-y: auto;
	background-color: #eef0f4;
	background-image: radial-gradient(rgba(16, 24, 40, 0.09) 1px, transparent 1px);
	background-size: 18px 18px;
}

.pfb-stage {
	min-height: 100%;
	padding: 48px 32px 120px;
}

.pfb-form.is-static .pfb-item {
	cursor: default;

	&:hover {
		outline-color: transparent;
	}

	.pfb-item__tag,
	.pfb-item__tools {
		display: none;
	}
}

.pfb-item {
	position: relative;
	grid-column: span 6;
	min-width: 0;
	margin: -8px;
	padding: 8px;
	border-radius: 10px;
	outline: 1.5px dashed transparent;
	outline-offset: 0;
	cursor: pointer;
	transition: outline-color 0.12s, background-color 0.12s;

	&:hover {
		outline-color: color-mix(in srgb, var(--a-brand) 45%, transparent);
	}

	&:focus-visible {
		outline: 2px solid var(--a-brand);
		box-shadow: none;
	}

	&.is-selected {
		background: color-mix(in srgb, var(--a-brand) 5%, transparent);
		outline: 2px solid var(--a-brand);
	}

	&.is-dragging {
		z-index: 5;
		background: var(--pf-bg);
		outline: 2px solid var(--a-brand);
		box-shadow: var(--a-shadow-lg);
		opacity: 0.92;
	}

	&.has-drop-before::before,
	&.has-drop-after::after {
		content: "";
		position: absolute;
		right: 4px;
		left: 4px;
		height: 3px;
		background: var(--a-brand);
		border-radius: 3px;
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-brand) 20%, transparent);
	}

	&.has-drop-before::before {
		top: calc(var(--pf-gap) / -2 - 1px);
	}

	&.has-drop-after::after {
		bottom: calc(var(--pf-gap) / -2 - 1px);
	}
}

.pf .pfb-item.pf-w-half {
	grid-column: span 3;
}

.pf .pfb-item.pf-w-third {
	grid-column: span 2;
}

.pfb-item__body {
	pointer-events: none;
}

.pfb-item__tag {
	position: absolute;
	top: -11px;
	left: 10px;
	z-index: 2;
	display: none;
	padding: 1px 8px;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	background: var(--a-brand);
	border-radius: 5px;
}

.pfb-item__tools {
	position: absolute;
	top: -15px;
	right: 8px;
	z-index: 2;
	display: none;
	padding: 2px;
	background: var(--a-surface);
	border: 1px solid var(--a-border);
	border-radius: 8px;
	box-shadow: 0 4px 12px -2px rgba(16, 24, 40, 0.15);
}

.pfb-item:hover .pfb-item__tools,
.pfb-item.is-selected .pfb-item__tools,
.pfb-item.is-selected .pfb-item__tag,
.pfb-item:focus-within .pfb-item__tools {
	display: flex;
}

.pfb-tool {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	color: var(--a-muted);
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: pointer;

	&:hover {
		color: var(--a-ink);
		background: var(--a-hover);
	}
}

.pfb-tool--grip {
	cursor: grab;
	touch-action: none;
}

.pfb-tool--danger:hover {
	color: var(--a-danger);
	background: var(--a-danger-soft);
}

.pfb-hidden-label {
	opacity: 0.4;
	text-decoration: line-through;
}

.pfb-hidden-chip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px 12px;
	color: var(--pf-text);
	font-size: 13px;
	border: 1.5px dashed var(--pf-border);
	border-radius: var(--pf-radius);
	opacity: 0.75;

	code {
		padding: 0;
		font-size: 12px;
		background: none;
	}
}

.pfb-hidden-chip__tag {
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--pf-faint);
	border-radius: 4px;
}

.pfb-hidden-chip__val {
	opacity: 0.7;
}

.pfb-empty {
	display: flex;
	flex-direction: column;
	grid-column: span 6;
	gap: 6px;
	align-items: center;
	padding: 48px 24px;
	color: var(--pf-muted);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13.5px;
	text-align: center;
	border: 2px dashed var(--pf-border);
	border-radius: 12px;
	transition: border-color 0.15s, background 0.15s;

	strong {
		color: var(--pf-text);
		font-size: 15px;
	}

	&.is-over {
		background: color-mix(in srgb, var(--a-brand) 6%, transparent);
		border-color: var(--a-brand);
	}
}

.pfb-enddrop {
	grid-column: span 6;
	height: 0;
	margin-top: calc(var(--pf-gap) * -1);
	border-radius: 10px;
	transition: height 0.15s, background 0.15s;

	&.is-active {
		height: 44px;
		margin-top: 0;
		border: 2px dashed var(--pf-border);
	}

	&.is-over {
		background: color-mix(in srgb, var(--a-brand) 8%, transparent);
		border-color: var(--a-brand);
	}
}

.pfb-form .pf-button {
	cursor: default;
}

/* Inspector. */
.pfb-insp {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pfb-insp__head {
	display: flex;
	flex: none;
	gap: 4px;
	align-items: center;
	padding: 14px 10px 14px 16px;
	border-bottom: 1px solid var(--a-border);
}

.pfb-insp__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-right: 6px;
	color: var(--a-brand);
	background: var(--a-brand-soft);
	border-radius: 9px;
}

.pfb-insp__titles {
	flex: 1;
	min-width: 0;
}

.pfb-insp__key {
	display: block;
	overflow: hidden;
	padding: 0;
	color: var(--a-subtle);
	font-size: 11.5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: none;
}

.pfb-insp__scroll {
	flex: 1;
	overflow-y: auto;
	scrollbar-width: thin;
}

.pfb-group {
	padding: 16px;
	border-bottom: 1px solid var(--a-border);

	&:last-child {
		border-bottom: 0;
	}
}

.pfb-group__title {
	margin-bottom: 12px;
	color: var(--a-subtle);
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pfb-group__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	color: var(--a-subtle);
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: none;
	border: 0;
	cursor: pointer;

	&[aria-expanded="true"] {
		margin-bottom: 12px;
	}
}

.pfb-group__body {
	display: grid;
	gap: 16px;
}

.pfb-opts {
	display: grid;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.pfb-opt {
	display: flex;
	gap: 4px;
	align-items: center;
	margin: 0;

	.pf-text {
		min-height: 34px;
		padding-block: 6px;
	}

	.pf-iconbtn {
		width: 26px;
		height: 26px;
	}
}

.pfb-opt__tools {
	display: flex;
	flex: none;
	opacity: 0.55;
	transition: opacity 0.15s;

	.pfb-opt:hover &,
	.pfb-opt:focus-within & {
		opacity: 1;
	}
}

.pfb-add-opt {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	padding: 6px 0;
	color: var(--a-brand);
	font-size: 13px;
	font-weight: 600;
	background: none;
	border: 0;
	cursor: pointer;

	&:hover {
		color: var(--a-brand-strong);
	}
}

.pfb-opt-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
	margin-top: 8px;
}

/* Design panel. */
.pfb-presets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.pfb-preset {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	text-align: left;
	background: var(--a-surface);
	border: 1.5px solid var(--a-border);
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;

	&:hover {
		border-color: var(--a-border-strong);
	}

	&.is-active {
		border-color: var(--a-brand);
		box-shadow: var(--a-ring);
	}
}

.pfb-preset__art {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 74px;
	padding: 12px;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
}

.pfb-preset__line {
	width: 40%;
	height: 4px;
	border-radius: 2px;
	opacity: 0.6;
}

.pfb-preset__field {
	height: 14px;
	border-style: solid;
}

.pfb-preset__btn {
	width: 55%;
	height: 14px;
	margin-top: auto;
}

.pfb-preset__name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px 2px;
	color: var(--a-ink);
	font-size: 12.5px;
	font-weight: 600;

	.pf-icon {
		color: var(--a-brand);
	}
}

.pfb-colors {
	display: grid;
	gap: 10px;
}

/* Settings tab. */
.pfb-settings {
	max-width: 1000px;
	margin: 0 auto;
	padding: 32px 24px 96px;

	.pf-section__body > .pf-seg {
		max-width: 420px;
	}
}

.pfb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding-top: 4px;
}

.pfb-tags__label {
	margin-right: 4px;
	color: var(--a-muted);
	font-size: 12.5px;
}

.pfb-tag {
	padding: 3px 8px;
	color: var(--a-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	background: var(--a-hover);
	border: 1px solid var(--a-border);
	border-radius: 6px;
	cursor: pointer;

	&:hover {
		color: var(--a-brand-strong);
		border-color: var(--a-brand);
	}

	&.is-copied {
		color: var(--a-success);
		border-color: var(--a-success);
	}
}

/* Share modal. */
.pfb-share {
	display: grid;
	gap: 8px;
}

.pfb-share__opt {
	display: flex;
	gap: 14px;
	padding: 14px;
	border: 1px solid var(--a-border);
	border-radius: 12px;

	h3 {
		color: var(--a-ink);
		font-size: 14px;
		font-weight: 650;
	}

	p {
		margin: 2px 0 10px;
		color: var(--a-muted);
		font-size: 13px;
	}
}

.pfb-share__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--a-brand);
	background: var(--a-brand-soft);
	border-radius: 10px;
}

.pfb-share__warn {
	padding: 10px 12px;
	color: #b54708;
	font-size: 13px;
	background: #fffaeb;
	border: 1px solid #fedf89;
	border-radius: 10px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1280px) {

	.pfb-body.has-inspector {
		grid-template-columns: 250px minmax(0, 1fr) 320px;
	}

	.pfb-body {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.pf-hide-md {
		display: none;
	}
}

@media (max-width: 1080px) {

	.pfb-bar {
		grid-template-columns: minmax(0, 1fr) auto;
		height: auto;
		padding-top: 10px;
	}

	.pfb-tabs {
		grid-row: 2;
		grid-column: 1 / -1;
		justify-self: center;
		margin-bottom: 8px;
	}

	.pfb-body.has-inspector {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	.pfb-side--right {
		position: fixed;
		top: var(--a-top);
		right: 0;
		bottom: 0;
		z-index: 40;
		width: min(360px, 100vw);
		box-shadow: var(--a-shadow-lg);
	}

	.pf-overview {
		grid-template-columns: 1fr;
	}

	.pf-entries.has-drawer {
		padding-right: 0;
	}
}

@media (max-width: 782px) {

	.pf-main {
		padding: 20px 16px 64px;
	}

	.pf-topbar {
		gap: 12px;
		padding: 0 16px;
		overflow-x: auto;
	}

	.pf-brand__name,
	.pf-hide-sm {
		display: none;
	}

	.pf-stats,
	.pf-stats--stack {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pf-search {
		width: 100%;
	}

	.pfb-body,
	.pfb-body.has-inspector {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
	}

	.pfb-side--left {
		max-height: 34vh;
		border-right: 0;
		border-bottom: 1px solid var(--a-border);
	}

	.pfb-stage {
		padding: 24px 12px 80px;
	}

	.pf-grid-2,
	.pf-grid-3 {
		grid-template-columns: 1fr;
	}

	.pf-drawer {
		width: 100vw;
	}
}