/* ==========================================================================
   FlightLearn – styles are scoped under .fl-app so nothing leaks onto the
   surrounding WordPress theme, and the theme cannot bleed in either.
   ========================================================================== */

.fl-app {
	/* Reset first – properties declared below this line in the same rule
	   win the cascade, so the custom properties and resets that follow
	   are what actually take effect. Declaring "all: initial" after them
	   would instead wipe them out. */
	all: initial;

	--fl-primary: #0D8DD4;
	--fl-primary-dark: #0a6fa8;
	--fl-primary-light: #5EB3E2;
	--fl-neutral: #54595F;
	--fl-neutral-light: #7A7A7A;
	--fl-text: #2C3033;
	--fl-bg: #F4F7F9;
	--fl-surface: #FFFFFF;
	--fl-border: #E1E6EA;
	--fl-success: #1E8E5A;
	--fl-success-bg: #EAF6F0;
	--fl-error: #C6433C;
	--fl-error-bg: #FBEBEA;
	--fl-radius: 10px;
	--fl-radius-sm: 6px;
	--fl-shadow: 0 1px 2px rgba(24, 39, 51, 0.06), 0 2px 10px rgba(24, 39, 51, 0.05);
	--fl-font: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	display: block;
	font-family: var(--fl-font) !important;
	color: var(--fl-text);
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	overflow: hidden;
	box-sizing: border-box;
	max-width: 100%;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Defends against theme CSS bleeding IN via generic element selectors
   (h2, table, button, ul, a, etc. are common theme reset targets, and
   many WordPress themes/page builders apply a heading font with
   !important – beating that requires !important on our side too, on
   font-family specifically). Kept at the same specificity as our later
   component classes (one class, via the universal selector) so source
   order lets those later, more specific-looking rules win normally for
   every other property – this just neutralises the theme's own
   un-scoped element selectors first. */
.fl-app *,
.fl-app *::before,
.fl-app *::after {
	box-sizing: border-box;
	font-family: var(--fl-font) !important;
	line-height: inherit;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
	text-decoration: none;
	list-style: none;
	font-size: 100%;
	font-weight: inherit;
	vertical-align: baseline;
	box-shadow: none;
	border-radius: 0;
	letter-spacing: normal;
	text-transform: none;
	float: none;
	max-width: none;
	min-width: 0;
}

.fl-app table {
	border-collapse: collapse;
	border-spacing: 0;
}

.fl-app button {
	cursor: pointer;
	font-size: inherit;
	appearance: none;
	/* NOTE: background is intentionally NOT reset here. This selector
	   (.fl-app button) has higher specificity than a single class like
	   .fl-btn-primary, so a "background: none" here would silently win
	   over every button's intended background colour regardless of
	   source order – which is exactly what caused the transparent
	   buttons with unreadable white text. The lower-specificity
	   ".fl-app *" rule above already resets background to none, and
	   component classes below correctly override that in source order. */
}

.fl-app svg {
	display: block;
	max-width: 100%;
}

.fl-app strong { font-weight: 600; }

.fl-boot-loading {
	padding: 48px 20px;
	text-align: center;
	color: var(--fl-neutral-light);
	font-size: 15px;
}

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

.fl-shell {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: 560px;
}

@media (max-width: 780px) {
	.fl-shell {
		grid-template-columns: 1fr;
	}
}

/* ---------- Header ---------- */

.fl-header {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	background: var(--fl-surface);
	border-bottom: 1px solid var(--fl-border);
}

.fl-header-title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fl-header-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fl-primary);
}

.fl-header-heading {
	font-size: 17px;
	font-weight: 600;
	color: var(--fl-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fl-header-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 160px;
}

.fl-progress-track {
	flex: 1;
	height: 6px;
	border-radius: 4px;
	background: var(--fl-border);
	overflow: hidden;
}

.fl-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--fl-primary-light), var(--fl-primary));
	border-radius: 4px;
	transition: width 0.4s ease;
}

.fl-progress-label {
	font-size: 12px;
	color: var(--fl-neutral-light);
	white-space: nowrap;
}

.fl-menu-toggle {
	display: none;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 8px 10px;
	color: var(--fl-neutral);
}

@media (max-width: 780px) {
	.fl-menu-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
}

/* ---------- Sidebar ---------- */

.fl-nav {
	background: var(--fl-surface);
	border-right: 1px solid var(--fl-border);
	padding: 16px 12px;
	overflow-y: auto;
}

@media (max-width: 780px) {
	.fl-nav {
		border-right: none;
		border-bottom: 1px solid var(--fl-border);
		display: none;
	}
	.fl-nav.fl-nav-open { display: block; }
}

.fl-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fl-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-radius: var(--fl-radius-sm);
	padding: 9px 10px;
	color: var(--fl-neutral);
	font-size: 13.5px;
}

.fl-nav-item:hover {
	background: var(--fl-bg);
}

.fl-nav-item.is-active {
	background: rgba(13, 141, 212, 0.09);
	color: var(--fl-primary-dark);
	font-weight: 600;
}

.fl-nav-badge {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--fl-neutral-light);
}

.fl-nav-item.is-active .fl-nav-badge {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
}

.fl-nav-item.is-complete .fl-nav-badge {
	background: var(--fl-success);
	border-color: var(--fl-success);
	color: #fff;
}

.fl-nav-item.is-complete.is-active .fl-nav-badge {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
}

.fl-nav-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fl-nav-divider {
	height: 1px;
	background: var(--fl-border);
	margin: 10px 4px;
}

.fl-nav-section-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fl-neutral-light);
	padding: 12px 10px 6px;
}
.fl-nav-section-header:first-child { padding-top: 4px; }

.fl-nav-item.fl-nav-test {
	color: var(--fl-neutral);
}

.fl-nav-item.fl-nav-test .fl-nav-badge {
	background: var(--fl-neutral);
	color: #fff;
	border-color: var(--fl-neutral);
}

.fl-nav-item.fl-nav-test.is-active .fl-nav-badge,
.fl-nav-item.fl-nav-test.is-complete .fl-nav-badge {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
}

/* ---------- Main content ---------- */

.fl-main {
	padding: 26px 30px 60px;
	overflow-y: auto;
	max-height: 78vh;
}

@media (max-width: 780px) {
	.fl-main { padding: 20px 16px 48px; max-height: none; }
}

.fl-module-head {
	margin-bottom: 22px;
}

.fl-module-eyebrow {
	font-size: 12px;
	font-weight: 600;
	color: var(--fl-primary);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.fl-module-title {
	font-size: 23px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--fl-text);
}

.fl-module-intro {
	color: var(--fl-neutral);
	font-size: 15px;
	max-width: 62ch;
}

.fl-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fl-neutral-light);
	margin: 34px 0 14px;
}

.fl-section-label:first-of-type { margin-top: 6px; }

.fl-section-label .fl-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fl-primary-light);
}

/* ---------- Cards ---------- */

.fl-card {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	padding: 20px 22px;
	margin-bottom: 14px;
}

.fl-card-heading {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--fl-text);
}

.fl-card-body {
	font-size: 14.5px;
	color: var(--fl-neutral);
}

.fl-card-body p { margin: 0 0 10px; }
.fl-card-body p:last-child { margin-bottom: 0; }

.fl-callout {
	border-radius: var(--fl-radius);
	padding: 18px 20px;
	margin-bottom: 14px;
	border: 1px solid rgba(13, 141, 212, 0.22);
	background: rgba(13, 141, 212, 0.05);
}

.fl-callout .fl-card-heading { color: var(--fl-primary-dark); }
.fl-callout .fl-card-body { color: var(--fl-text); }

/* Definitions */

.fl-defs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.fl-def-term {
	font-size: 13px;
	font-weight: 700;
	color: var(--fl-primary-dark);
	margin-bottom: 4px;
	letter-spacing: 0.01em;
}

.fl-def-body {
	font-size: 13.5px;
	color: var(--fl-neutral);
}

/* Formula */

.fl-formula-expression {
	font-size: 22px;
	font-weight: 600;
	color: var(--fl-text);
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 14px 18px;
	margin: 6px 0 14px;
	text-align: center;
}

.fl-formula-legend {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.fl-formula-legend li {
	font-size: 13.5px;
	color: var(--fl-neutral);
}

.fl-formula-legend b {
	color: var(--fl-text);
	font-weight: 700;
	margin-right: 6px;
}

.fl-formula-note {
	font-size: 13.5px;
	color: var(--fl-text);
	background: var(--fl-bg);
	border-radius: var(--fl-radius-sm);
	padding: 12px 14px;
}

/* Table */

.fl-table-wrap {
	overflow-x: auto;
}

.fl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.fl-table th,
.fl-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--fl-border);
	white-space: nowrap;
}

.fl-table th {
	color: var(--fl-neutral-light);
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--fl-bg);
}

.fl-table tr:last-child td { border-bottom: none; }

/* Diagram card */

.fl-diagram-card { text-align: center; }
.fl-diagram-caption {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--fl-neutral-light);
}

/* ---------- Explore widgets ---------- */

.fl-explore-card {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	padding: 20px 22px 22px;
	margin-bottom: 16px;
}

.fl-explore-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
}

.fl-explore-desc {
	font-size: 13.5px;
	color: var(--fl-neutral-light);
	margin: 0 0 16px;
}

.fl-stage {
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.fl-controls-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.fl-btn {
	appearance: none;
	border: 1px solid var(--fl-border);
	background: var(--fl-surface);
	color: var(--fl-neutral);
	border-radius: var(--fl-radius-sm);
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fl-btn:hover { border-color: var(--fl-primary-light); color: var(--fl-primary-dark); }

.fl-btn.is-active {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
}

.fl-btn-primary {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
}
.fl-btn-primary:hover { background: var(--fl-primary-dark); border-color: var(--fl-primary-dark); color: #fff; }

.fl-readout {
	font-size: 13px;
	color: var(--fl-neutral);
	text-align: center;
}
.fl-readout b { color: var(--fl-primary-dark); font-weight: 700; }

.fl-slider {
	width: 100%;
	max-width: 420px;
	accent-color: var(--fl-primary);
}

/* Sequence stepper */

.fl-sequence {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	width: 100%;
}

@media (max-width: 600px) {
	.fl-sequence { grid-template-columns: 1fr; }
}

.fl-seq-step {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 12px;
	text-align: center;
	position: relative;
	opacity: 0.45;
	transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.fl-seq-step.is-active {
	opacity: 1;
	border-color: var(--fl-primary);
	transform: translateY(-2px);
	box-shadow: var(--fl-shadow);
}

.fl-seq-step-num {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fl-bg);
	color: var(--fl-neutral-light);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8px;
}

.fl-seq-step.is-active .fl-seq-step-num {
	background: var(--fl-primary);
	color: #fff;
}

.fl-seq-step-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fl-primary-dark);
	margin-bottom: 4px;
}

.fl-seq-step-text {
	font-size: 12.5px;
	color: var(--fl-neutral);
}

/* ---------- Check / quiz blocks ---------- */

.fl-check-card {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius);
	padding: 18px 20px;
	margin-bottom: 12px;
}

.fl-check-prompt {
	font-size: 14.5px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--fl-text);
}

.fl-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fl-option {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 10px 12px;
	font-size: 13.5px;
	color: var(--fl-text);
}

.fl-option:hover:not(:disabled) {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
}
.fl-option:hover:not(:disabled) .fl-opt-letter {
	background: #fff;
	border-color: #fff;
	color: var(--fl-primary-dark);
}

.fl-option.is-active {
	border-color: var(--fl-primary);
}

.fl-option .fl-opt-letter {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fl-neutral-light);
}

.fl-option.is-correct {
	background: var(--fl-success-bg);
	border-color: var(--fl-success);
	color: var(--fl-success);
}
.fl-option.is-correct .fl-opt-letter { background: var(--fl-success); border-color: var(--fl-success); color: #fff; }

.fl-option.is-incorrect {
	background: var(--fl-error-bg);
	border-color: var(--fl-error);
	color: var(--fl-error);
}
.fl-option.is-incorrect .fl-opt-letter { background: var(--fl-error); border-color: var(--fl-error); color: #fff; }

.fl-option:disabled { cursor: default; }
.fl-option:disabled:hover { background: inherit; }

.fl-feedback {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: var(--fl-radius-sm);
	font-size: 13px;
}
.fl-feedback.is-correct { background: var(--fl-success-bg); color: var(--fl-success); }
.fl-feedback.is-incorrect { background: var(--fl-error-bg); color: var(--fl-error); }
.fl-feedback b { display: block; margin-bottom: 2px; font-weight: 700; }

.fl-reset-link {
	display: inline-block;
	margin-top: 10px;
	background: none;
	border: none;
	color: var(--fl-primary);
	font-weight: 600;
	font-size: 12.5px;
	padding: 0;
}
.fl-reset-link:hover { color: var(--fl-primary-dark); text-decoration: underline; }

/* True/false pair rendered as two options via fl-options too */

/* Matching */

.fl-matching {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 520px) { .fl-matching { grid-template-columns: 1fr; } }

.fl-match-col-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--fl-neutral-light);
	margin-bottom: 8px;
}

.fl-match-item {
	width: 100%;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 10px 12px;
	font-size: 13.5px;
	margin-bottom: 8px;
	text-align: left;
	color: var(--fl-text);
}

.fl-match-item:hover:not(:disabled) {
	background: var(--fl-primary);
	border-color: var(--fl-primary);
	color: #fff;
}

.fl-match-item.is-selected {
	border-color: var(--fl-primary);
	background: rgba(13, 141, 212, 0.08);
}

.fl-match-item.is-paired {
	border-color: var(--fl-primary-light);
	background: rgba(94, 179, 226, 0.12);
	color: var(--fl-primary-dark);
	font-weight: 600;
}

.fl-match-item.is-correct { border-color: var(--fl-success); background: var(--fl-success-bg); color: var(--fl-success); }
.fl-match-item.is-incorrect { border-color: var(--fl-error); background: var(--fl-error-bg); color: var(--fl-error); }

.fl-match-item:disabled { cursor: default; opacity: 0.9; }
.fl-match-item:disabled:hover { background: inherit; color: inherit; border-color: inherit; }

/* ---------- Module footer nav ---------- */

.fl-module-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--fl-border);
	gap: 10px;
	flex-wrap: wrap;
}

.fl-module-footer .fl-btn { padding: 10px 18px; }

/* ---------- Test screen ---------- */

.fl-test-intro {
	text-align: center;
	max-width: 60ch;
	margin: 20px auto;
}

.fl-test-intro h2 { font-size: 21px; margin: 0 0 10px; }
.fl-test-intro p { color: var(--fl-neutral); font-size: 14.5px; margin-bottom: 20px; }

.fl-test-progress {
	font-size: 12.5px;
	color: var(--fl-neutral-light);
	margin-bottom: 10px;
	text-align: right;
}

.fl-results-score {
	text-align: center;
	padding: 28px 20px 8px;
}

.fl-results-ring {
	width: 118px;
	height: 118px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(var(--fl-primary) calc(var(--pct, 0) * 1%), var(--fl-border) 0);
}

.fl-results-ring-inner {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--fl-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.fl-results-pct { font-size: 22px; font-weight: 700; color: var(--fl-text); }
.fl-results-frac { font-size: 11.5px; color: var(--fl-neutral-light); }

.fl-results-headline { font-size: 17px; font-weight: 700; margin: 4px 0 18px; }

.fl-revision-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 8px;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.fl-revision-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 10px 14px;
	font-size: 13.5px;
	text-align: left;
}

.fl-revision-item button {
	background: none;
	border: none;
	color: var(--fl-primary);
	font-weight: 600;
	font-size: 12.5px;
}

.fl-test-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
	flex-wrap: wrap;
}

/* ---------- Diagram-specific tweaks ---------- */

.fl-svg-neutral { color: var(--fl-neutral); }
.fl-svg-primary { color: var(--fl-primary); }

.fl-aircraft-wrap {
	width: 100%;
	max-width: 260px;
	transition: transform 0.5s cubic-bezier(.4,0,.2,1);
}

.fl-flap-toggle-row { display: flex; gap: 8px; }

.fl-two-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	width: 100%;
}
@media (max-width: 560px) { .fl-two-panel { grid-template-columns: 1fr; } }

.fl-panel-card {
	background: var(--fl-surface);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 14px;
	text-align: center;
}

.fl-panel-title {
	font-size: 12px;
	font-weight: 700;
	color: var(--fl-neutral-light);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}

/* ---------- ICAO phonetic alphabet / number-plate practice ---------- */

.fl-plate {
	display: flex;
	gap: 4px;
	justify-content: center;
	flex-wrap: wrap;
	background: #fff;
	border: 3px solid var(--fl-text);
	border-radius: 8px;
	padding: 14px 20px;
	margin: 4px 0 14px;
}

.fl-plate-char {
	font-family: 'Courier New', Courier, monospace;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--fl-text);
}

.fl-plate-input {
	width: 100%;
	background: var(--fl-bg);
	border: 1px solid var(--fl-border);
	border-radius: var(--fl-radius-sm);
	padding: 10px 12px;
	font-size: 14px;
	color: var(--fl-text);
	margin-bottom: 10px;
}
.fl-plate-input:focus {
	outline: none;
	border-color: var(--fl-primary);
}
.fl-plate-input:disabled {
	opacity: 0.75;
}

.fl-plate-breakdown {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.fl-plate-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	border-radius: var(--fl-radius-sm);
	padding: 6px 10px;
	font-size: 12.5px;
	border: 1px solid transparent;
}
.fl-plate-chip.is-correct {
	background: var(--fl-success-bg);
	color: var(--fl-success);
	border-color: var(--fl-success);
}
.fl-plate-chip.is-incorrect {
	background: var(--fl-error-bg);
	color: var(--fl-error);
	border-color: var(--fl-error);
}
.fl-plate-chip-char {
	font-family: 'Courier New', Courier, monospace;
	font-weight: 700;
	background: rgba(0,0,0,0.06);
	border-radius: 4px;
	padding: 1px 6px;
}