.ffc-mode-switch {
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	gap: 3px;
	margin: 0 0 1rem;
	padding: 3px;
	border: 1px solid var(--ff-border);
	border-radius: 10px;
	background: #f7f7f4;
}
.ffc-mode {
	min-height: 40px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ff-muted);
	font-size: .78rem;
	font-weight: 800;
}
.ffc-mode.is-active { background: var(--ff-brand); color: #fff; }

.ffc-method-note {
	margin: 0 1.1rem 1rem;
	padding: .75rem .85rem;
	border-left: 4px solid var(--ff-brand);
	border-radius: 0 9px 9px 0;
	background: var(--ff-soft-green);
}
.ffc-method-note strong { display: block; font-size: .78rem; }
.ffc-method-note p { margin: .2rem 0 0; color: var(--ff-muted); font-size: .7rem; line-height: 1.4; }

.ffc-action-field { align-self: end; }
.ffc-small-button {
	width: 100%;
	min-height: 45px;
	border: 1px solid #cfd3cd;
	border-radius: 9px;
	background: #fff;
	color: var(--ff-brand);
	font: inherit;
	font-size: .78rem;
	font-weight: 850;
}
.ffc-small-button:hover { background: var(--ff-soft-green); }

.ffc-inline-action { padding: .9rem 1.1rem 0; }
.ffc-inline-action .ffc-small-button { width: auto; min-width: 150px; }

.ffc-presets { margin: 1rem 1.1rem 0; }
.ffc-presets > span { display: block; margin-bottom: .45rem; color: var(--ff-muted); font-size: .68rem; font-weight: 850; }
.ffc-presets > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.ffc-presets button {
	min-height: 34px;
	padding: .4rem .7rem;
	border: 1px solid #cfd3cd;
	border-radius: 999px;
	background: #fff;
	color: var(--ff-brand);
	font-size: .7rem;
	font-weight: 850;
}
.ffc-presets button:hover { background: var(--ff-soft-green); }

.ffc-result-body { padding-bottom: 1rem; }
.ffc-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ffc-detail {
	margin: 0 1rem;
	padding: .85rem;
	border: 1px solid #dfe3de;
	border-radius: 12px;
	background: #f3f6f3;
}
.ffc-detail > strong { color: var(--ff-ink); font-size: .8rem; }
.ffc-detail p { margin: .25rem 0 0; color: var(--ff-muted); font-size: .72rem; line-height: 1.45; }
.ffc-stale, .ffc-error {
	margin: .8rem 1rem 0;
	padding: .7rem .8rem;
	border-radius: 9px;
	font-size: .73rem;
}
.ffc-stale { background: #fff3df; color: #704a10; }
.ffc-stale strong { margin-right: .35rem; }
.ffc-error { border: 1px solid rgba(185,79,50,.22); background: #fff0eb; color: #8f3522; }

@media (max-width: 760px) {
	.ffc-mode-switch { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ffc-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
	.ffc-mode-switch, .ffc-metrics { grid-template-columns: 1fr; }
}


.ffc-lower-grid { margin-top: 1rem; }
.ffc-panel__head--accent {
	background: var(--ff-accent);
	color: #fff;
}
.ffc-panel__head--accent .qbc-panel__eyebrow,
.ffc-panel__head--accent h2 { color: #fff; }
.ffc-panel__head--accent .qbc-step {
	background: rgba(255,255,255,.18);
	color: #fff;
}
.ffc-reference-visual {
	display: grid;
	grid-template-columns: minmax(180px,.85fr) minmax(0,1.15fr);
	gap: 1rem;
	padding: 1rem 1.1rem 1.15rem;
}
.ffc-reference-box {
	display: grid;
	place-items: center;
	min-height: 150px;
	padding: 1rem;
	border: 1px solid #ddd6ca;
	background: #fbf6ec;
	text-align: center;
}
.ffc-reference-box strong { font-family: var(--ff-serif); font-size: 1.5rem; color: var(--ff-ink); }
.ffc-reference-box span { margin-top: .35rem; color: var(--ff-muted); font-size: .72rem; line-height: 1.4; }
.ffc-reference-list { display: grid; gap: .35rem; align-content: center; }
.ffc-reference-list > div,
.ffc-summary-list > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .72rem 0;
	border-bottom: 1px solid #e5e5e0;
}
.ffc-reference-list span,
.ffc-summary-list span { color: var(--ff-muted); font-size: .72rem; }
.ffc-reference-list strong,
.ffc-summary-list strong { text-align: right; font-size: .76rem; color: var(--ff-ink); }
.ffc-summary-list { padding: 1rem 1.1rem 1.15rem; }

@media (max-width:760px) {
	.ffc-reference-visual { grid-template-columns: 1fr; }
}