/**
 * public/css/fnr.css
 *
 * All plugin UI is scoped under .fnr so it sits inside any theme.
 * Colours are custom properties; override them in the theme to rebrand.
 */

.fnr {
	--fnr-primary: #0e7490;
	--fnr-primary-strong: #155e75;
	--fnr-primary-soft: #e0f2f7;
	--fnr-accent: #e8590c;
	--fnr-ink: #0f172a;
	--fnr-ink-2: #334155;
	--fnr-muted: #64748b;
	--fnr-line: #e2e8f0;
	--fnr-surface: #ffffff;
	--fnr-surface-2: #f8fafc;
	--fnr-good: #15803d;
	--fnr-good-soft: #dcfce7;
	--fnr-fair: #b45309;
	--fnr-fair-soft: #fef3c7;
	--fnr-bad: #b91c1c;
	--fnr-bad-soft: #fee2e2;
	--fnr-missed: #7c3aed;
	--fnr-missed-soft: #ede9fe;
	--fnr-radius: 14px;
	--fnr-radius-sm: 8px;
	--fnr-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);

	color: var(--fnr-ink);
	font-size: 16px;
	line-height: 1.6;
	box-sizing: border-box;
}
.fnr *, .fnr *::before, .fnr *::after { box-sizing: inherit; }
.fnr img { max-width: 100%; height: auto; }

.fnr-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.fnr-section { margin: 40px 0; }
.fnr-section > h2, .fnr-section > h3 { margin: 0 0 16px; }
.fnr-muted { color: var(--fnr-muted); }
.fnr-eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fnr-primary); }
.fnr-card { background: var(--fnr-surface); border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius); box-shadow: var(--fnr-shadow); }
.fnr-icon { width: 18px; height: 18px; flex: none; }
.fnr-prose > :first-child { margin-top: 0; }
.fnr-prose > :last-child { margin-bottom: 0; }
.fnr-prose table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.fnr-prose th, .fnr-prose td { border: 1px solid var(--fnr-line); padding: 6px 10px; text-align: left; }

/* ---- buttons, tags, notices ---------------------------------------- */

.fnr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
	font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2;
	text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
}
.fnr-btn:active { transform: translateY(1px); }
.fnr-btn:disabled { cursor: default; opacity: .7; }
.fnr-btn--primary { background: var(--fnr-primary); color: #fff; }
.fnr-btn--primary:hover:not(:disabled) { background: var(--fnr-primary-strong); color: #fff; }
.fnr-btn--ghost { background: transparent; color: var(--fnr-ink-2); border-color: var(--fnr-line); }
.fnr-btn--ghost:hover { border-color: var(--fnr-primary); color: var(--fnr-primary); }
.fnr-btn--done { background: var(--fnr-good-soft); color: var(--fnr-good); }
.fnr-btn--lg { padding: 13px 24px; font-size: 16px; }
.fnr-btn--sm { padding: 6px 12px; font-size: 14px; }
.fnr-btn.is-busy { position: relative; color: transparent !important; }
.fnr-btn.is-busy::after {
	content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: fnr-spin .7s linear infinite;
}
.fnr-btn--ghost.is-busy::after { border-color: var(--fnr-line); border-top-color: var(--fnr-primary); }
@keyframes fnr-spin { to { transform: rotate(360deg); } }
.fnr-icon-btn { border: 1px solid var(--fnr-line); background: var(--fnr-surface); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: var(--fnr-ink-2); font-size: 11px; }
.fnr-icon-btn:hover:not(:disabled) { border-color: var(--fnr-primary); color: var(--fnr-primary); }

.fnr-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--fnr-surface-2); border: 1px solid var(--fnr-line); font-size: 12px; font-weight: 600; color: var(--fnr-ink-2); white-space: nowrap; }
.fnr-tag--accent { background: #fff1e6; border-color: #fed7aa; color: var(--fnr-accent); }
.fnr-tag--good { background: var(--fnr-good-soft); border-color: transparent; color: var(--fnr-good); }
.fnr-tag--weak { background: var(--fnr-bad-soft); border-color: transparent; color: var(--fnr-bad); }
.fnr-badge { display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fnr-badge--practice { background: var(--fnr-primary-soft); color: var(--fnr-primary-strong); }
.fnr-badge--exam { background: #1e293b; color: #fff; }
.fnr-badge--case { background: #fff1e6; color: var(--fnr-accent); }

.fnr-notice { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--fnr-radius-sm); background: var(--fnr-surface-2); border: 1px solid var(--fnr-line); margin: 16px 0; }
.fnr-notice--info { background: var(--fnr-primary-soft); border-color: #a5d8e6; color: var(--fnr-primary-strong); }
.fnr-notice--warn { background: #fff7ed; border-color: #f3c79b; color: #9a3412; }
.fnr-notice[hidden] { display: none; }

.fnr-progress__label { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.fnr-progress__track { height: 8px; background: var(--fnr-line); border-radius: 999px; overflow: hidden; }
.fnr-progress__track > span { display: block; height: 100%; background: var(--fnr-primary); border-radius: 999px; transition: width .4s ease; }
.fnr-progress small { display: block; margin-top: 6px; color: var(--fnr-muted); }
.fnr-progress--sm .fnr-progress__track { height: 6px; }

.fnr-price { font-size: 28px; font-weight: 800; margin: 0 0 14px; }
.fnr-price--sm { font-size: 16px; margin: 0; }

.fnr-facts { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 18px 0; padding: 0; }
.fnr-facts li { flex: 1 1 90px; background: var(--fnr-surface-2); border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); padding: 10px 12px; text-align: center; }
.fnr-facts strong { display: block; font-size: 20px; line-height: 1.2; }
.fnr-facts span { font-size: 12px; color: var(--fnr-muted); text-transform: uppercase; letter-spacing: .04em; }

.fnr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.fnr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fnr-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fnr-table th, .fnr-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--fnr-line); }
.fnr-table th { font-size: 13px; color: var(--fnr-muted); font-weight: 600; }

/* ---- charts --------------------------------------------------------- */

.fnr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fnr-bars__row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr 70px; gap: 12px; align-items: center; font-size: 14px; }
.fnr-bars__track { height: 10px; background: var(--fnr-line); border-radius: 999px; overflow: hidden; }
.fnr-bars__fill { display: block; height: 100%; border-radius: 999px; background: var(--fnr-primary); }
.fnr-bars__row.is-good .fnr-bars__fill { background: var(--fnr-good); }
.fnr-bars__row.is-fair .fnr-bars__fill { background: #d97706; }
.fnr-bars__row.is-weak .fnr-bars__fill { background: var(--fnr-bad); }
.fnr-bars__value { text-align: right; font-weight: 600; }
.fnr-bars__value small { display: block; font-weight: 400; color: var(--fnr-muted); font-size: 11px; }

.fnr-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.fnr-donut__svg { width: 170px; height: 170px; flex: none; }
.fnr-donut__hole { fill: none; stroke: var(--fnr-line); stroke-width: 5; }
.fnr-donut__slice { fill: none; stroke-width: 5; transition: stroke-width .15s ease; }
.fnr-donut__slice:hover { stroke-width: 6.5; }
.fnr-donut__value { font-size: 7px; font-weight: 700; fill: var(--fnr-ink); text-anchor: middle; }
.fnr-donut__label { font-size: 2.8px; fill: var(--fnr-muted); text-anchor: middle; text-transform: uppercase; letter-spacing: .08em; }
.fnr-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; flex: 1 1 180px; font-size: 13px; }
.fnr-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.fnr-legend__swatch { width: 12px; height: 12px; border-radius: 3px; }
.fnr-legend__value { font-weight: 600; text-align: right; white-space: nowrap; }
.fnr-legend__value small { font-weight: 400; color: var(--fnr-muted); }

.fnr-columns { width: 100%; height: auto; display: block; }
.fnr-columns__grid { stroke: var(--fnr-line); }
.fnr-columns__axis, .fnr-columns__label { font-size: 11px; fill: var(--fnr-muted); }
.fnr-columns__bar { fill: var(--fnr-primary); }
.fnr-columns__bar:hover { fill: var(--fnr-primary-strong); }
.fnr-columns__bar.is-good { fill: var(--fnr-good); }
.fnr-columns__bar.is-fair { fill: #d97706; }
.fnr-columns__bar.is-weak { fill: var(--fnr-bad); }

.fnr-radar { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.fnr-radar__grid { fill: none; stroke: var(--fnr-line); }
.fnr-radar__axis { stroke: var(--fnr-line); }
.fnr-radar__area { fill: rgba(14, 116, 144, .18); stroke: var(--fnr-primary); stroke-width: 2; }
.fnr-radar__dot { fill: var(--fnr-primary); }
.fnr-radar__label { font-size: 12px; fill: var(--fnr-ink-2); }
.fnr-radar__pct { font-weight: 700; fill: var(--fnr-primary-strong); }

/* ---- course page ----------------------------------------------------- */

.fnr-hero { background: linear-gradient(135deg, #0b3b4c 0%, #0e7490 100%); color: #fff; padding: 56px 0 72px; }
.fnr-hero__grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.fnr-hero .fnr-eyebrow { color: #a5f3fc; }
.fnr-hero__title { color: #fff; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 0 0 14px; }
.fnr-hero__lede { font-size: 18px; color: #d7f0f6; margin: 0 0 20px; max-width: 640px; }
.fnr-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0; padding: 0; color: #d7f0f6; font-size: 15px; }
.fnr-hero__meta li + li::before { content: "·"; margin-right: 18px; opacity: .6; }
.fnr-cta-card { color: var(--fnr-ink); overflow: hidden; margin-bottom: -120px; position: relative; }
.fnr-cta-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fnr-cta-card__body { padding: 22px; display: grid; gap: 16px; }
.fnr-cta-card .fnr-btn { width: 100%; }
.fnr-course__body { max-width: 780px; margin-left: max(20px, calc((100% - 1180px) / 2 + 20px)); padding-top: 12px; }

/* ---- curriculum ------------------------------------------------------ */

.fnr-curriculum { display: grid; gap: 12px; }
.fnr-module { border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius); background: var(--fnr-surface); overflow: hidden; }
.fnr-module__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; background: var(--fnr-surface-2); }
.fnr-module__head::-webkit-details-marker { display: none; }
.fnr-module__title { font-weight: 700; }
.fnr-module__title small { display: block; font-weight: 600; font-size: 12px; color: var(--fnr-muted); text-transform: uppercase; letter-spacing: .05em; }
.fnr-module__count { font-size: 13px; color: var(--fnr-muted); white-space: nowrap; }
.fnr-items { list-style: none; margin: 0; padding: 0; }
.fnr-item + .fnr-item { border-top: 1px solid var(--fnr-line); }
.fnr-item__link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--fnr-ink); text-decoration: none; }
a.fnr-item__link:hover { background: var(--fnr-surface-2); }
.fnr-item__status { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fnr-primary-soft); color: var(--fnr-primary); flex: none; }
.fnr-item__status .fnr-icon { width: 14px; height: 14px; }
.fnr-item--quiz .fnr-item__status { background: #fff1e6; color: var(--fnr-accent); }
.fnr-item.is-complete .fnr-item__status { background: var(--fnr-good); color: #fff; }
.fnr-item.is-locked .fnr-item__link { color: var(--fnr-muted); }
.fnr-item.is-locked .fnr-item__status { background: var(--fnr-line); color: var(--fnr-muted); }
.fnr-item.is-current .fnr-item__link { background: var(--fnr-primary-soft); font-weight: 600; box-shadow: inset 3px 0 0 var(--fnr-primary); }
.fnr-item__title { flex: 1; min-width: 0; }
.fnr-item__meta { display: flex; gap: 8px; align-items: center; }
.fnr-item__time { font-size: 13px; color: var(--fnr-muted); }
.fnr-curriculum--compact .fnr-module { border-radius: 0; border-width: 0 0 1px; box-shadow: none; }
.fnr-curriculum--compact { gap: 0; }
.fnr-curriculum--compact .fnr-item__link { padding: 10px 16px; font-size: 14px; }
.fnr-curriculum--compact .fnr-module__head { padding: 12px 16px; }

/* ---- player ---------------------------------------------------------- */

.fnr-player { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: 70vh; border-top: 1px solid var(--fnr-line); }
.fnr-player--solo { grid-template-columns: minmax(0, 1fr); }
.fnr-player__sidebar { border-right: 1px solid var(--fnr-line); background: var(--fnr-surface); max-height: 100vh; overflow-y: auto; position: sticky; top: 0; }
.fnr-player__course { padding: 18px 16px; border-bottom: 1px solid var(--fnr-line); display: grid; gap: 10px; }
.fnr-player__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fnr-muted); text-decoration: none; }
.fnr-player__back:hover { color: var(--fnr-primary); }
.fnr-player__course-title { font-size: 17px; margin: 0; line-height: 1.3; }
.fnr-player__main { padding: 28px clamp(16px, 4vw, 48px) 60px; max-width: 980px; width: 100%; margin: 0 auto; }
.fnr-player__header { margin-bottom: 20px; }
.fnr-player__title { font-size: clamp(26px, 3vw, 34px); margin: 0; line-height: 1.2; }
.fnr-player__toggle { display: none; margin-bottom: 12px; }
.fnr-player__media { display: grid; gap: 18px; margin-bottom: 24px; }
.fnr-player__media:empty { display: none; }
.fnr-player__content { font-size: 17px; }
.fnr-player__nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--fnr-line); }
.fnr-player__nav > div:last-child { text-align: right; }

.fnr-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--fnr-radius); overflow: hidden; }
.fnr-video iframe, .fnr-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fnr-audio { margin: 0; padding: 14px 16px; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius); background: var(--fnr-surface-2); }
.fnr-audio figcaption { font-weight: 600; margin-bottom: 8px; }
.fnr-audio audio { width: 100%; }
.fnr-pdf { margin: 0; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius); overflow: hidden; }
.fnr-pdf__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: var(--fnr-surface-2); border-bottom: 1px solid var(--fnr-line); font-weight: 600; }
.fnr-pdf object { display: block; width: 100%; }

.fnr-media-item { display: grid; gap: 10px; }
.fnr-media-item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fnr-media-item__title { font-weight: 700; margin-right: auto; }
.fnr-media-item__status { font-size: 13px; font-weight: 600; color: var(--fnr-good); }
.fnr-media-item__status:not(:empty)::before { content: "✓ "; }
.fnr-media-item__review { justify-self: start; }
.fnr-media-item audio { width: 100%; }
.fnr-media-image { margin: 0; }
.fnr-media-image img { display: block; width: 100%; height: auto; border-radius: var(--fnr-radius); border: 1px solid var(--fnr-line); }

.fnr-requirements { margin-top: 32px; padding: 14px 18px; border: 1px solid #f3c79b; border-left: 4px solid var(--fnr-accent); border-radius: var(--fnr-radius-sm); background: #fff7ed; transition: box-shadow .3s; }
.fnr-requirements.is-complete { border-color: #bbf7d0; border-left-color: var(--fnr-good); background: var(--fnr-good-soft); }
.fnr-requirements.is-flash { box-shadow: 0 0 0 4px rgba(232, 89, 12, .3); }
.fnr-requirements p { margin: 0 0 6px; }
.fnr-requirements [data-fnr-req-count] { color: var(--fnr-muted); font-size: 14px; margin-left: 6px; }
.fnr-requirements ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.fnr-requirements li::before { content: "○"; display: inline-block; width: 1.4em; color: var(--fnr-muted); }
.fnr-requirements li.is-done { color: var(--fnr-muted); text-decoration: line-through; }
.fnr-requirements li.is-done::before { content: "✓"; color: var(--fnr-good); text-decoration: none; }
.fnr-btn.is-locked, .fnr-btn.is-blocked { opacity: .55; cursor: not-allowed; }
.fnr-player__blocked { margin: 32px 0 0; }
.fnr-player__blocked ul { margin: 6px 0 0; padding-left: 20px; }
.fnr-link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.fnr-media-item.is-flash { box-shadow: 0 0 0 4px rgba(232, 89, 12, .35); border-radius: var(--fnr-radius); transition: box-shadow .3s; }
.fnr-downloads { margin-top: 32px; }
.fnr-downloads h3 { font-size: 18px; }
.fnr-downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fnr-downloads a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); text-decoration: none; color: var(--fnr-ink); }
.fnr-downloads a:hover { border-color: var(--fnr-primary); }
.fnr-dl__size { color: var(--fnr-muted); font-size: 14px; }

/* ---- catalog & dashboard -------------------------------------------- */

.fnr-page-head { padding: 40px 0 24px; }
.fnr-page-head h1 { margin: 0 0 6px; }
.fnr-course-card { display: flex; flex-direction: column; overflow: hidden; }
.fnr-course-card__media { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #0b3b4c, #0e7490) center / cover no-repeat; text-decoration: none; }
.fnr-course-card__initial { font-size: 56px; font-weight: 800; color: rgba(255, 255, 255, .85); }
.fnr-course-card__body { padding: 16px 18px 8px; flex: 1; }
.fnr-course-card__title { font-size: 18px; margin: 0 0 4px; line-height: 1.3; }
.fnr-course-card__title a { color: inherit; text-decoration: none; }
.fnr-course-card__meta { margin: 0 0 10px; color: var(--fnr-muted); font-size: 14px; }
.fnr-course-card__excerpt { margin: 0; color: var(--fnr-ink-2); font-size: 15px; }
.fnr-course-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px 18px; }
.fnr-course-card__foot .fnr-btn:only-child { margin-left: auto; }

.fnr-dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.fnr-dash-head h2 { margin: 0; }
.fnr-dash-head .fnr-facts { margin: 0; }
.fnr-dash-perf { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.fnr-dash-perf .fnr-card { padding: 22px; }
.fnr-dash-perf h3 { margin-top: 0; }
.fnr-dash-perf h4 { margin: 24px 0 10px; }
.fnr-empty { padding: 28px; text-align: center; }
.fnr-login-card { max-width: 440px; margin: 40px auto; padding: 28px; }
.fnr-login-card input[type="text"], .fnr-login-card input[type="password"] { width: 100%; padding: 10px; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); }

/* ---- quiz shell ------------------------------------------------------ */

.fnr-quiz { max-width: 980px; margin: 0 auto; }
.fnr-quiz--embed { margin: 24px auto; }
.fnr-quiz__intro { overflow: hidden; }
.fnr-quiz__cover { aspect-ratio: 21 / 7; background: center / cover no-repeat; }
.fnr-quiz__intro-body { padding: clamp(20px, 4vw, 36px); }
.fnr-quiz__title { font-size: clamp(26px, 3vw, 34px); margin: 12px 0; line-height: 1.2; }
.fnr-quiz__mode-note { font-size: 14px; }
.fnr-quiz__actions { margin-top: 20px; }
.fnr-quiz__bar { display: flex; align-items: center; gap: 16px; padding: 12px 0 20px; }
.fnr-quiz__count { font-weight: 700; white-space: nowrap; font-size: 14px; }
.fnr-quiz__track { flex: 1; height: 6px; background: var(--fnr-line); border-radius: 999px; overflow: hidden; }
.fnr-quiz__track span { display: block; height: 100%; background: var(--fnr-primary); transition: width .3s; }
.fnr-quiz__timer { font-variant-numeric: tabular-nums; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: var(--fnr-surface-2); border: 1px solid var(--fnr-line); }
.fnr-quiz__timer.is-low { background: var(--fnr-bad-soft); color: var(--fnr-bad); border-color: transparent; }
.fnr-quiz__loading { padding: 60px; text-align: center; color: var(--fnr-muted); }
.fnr-quiz__flash { position: sticky; top: 12px; z-index: 5; }

.fnr-q { background: var(--fnr-surface); border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius); padding: clamp(18px, 3vw, 30px); box-shadow: var(--fnr-shadow); min-width: 0; }
.fnr-q__stem { font-size: 18px; margin-bottom: 18px; }
.fnr-q__hint { font-size: 14px; color: var(--fnr-muted); margin: 0 0 12px; font-style: italic; }
.fnr-q__actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.fnr-q__msg { margin: 0 auto 0 0; color: var(--fnr-bad); font-size: 14px; }
.fnr-q__msg:empty { display: none; }

/* choice lists */
.fnr-choices { display: grid; gap: 10px; }
.fnr-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.fnr-choice:hover { border-color: #94c9d6; }
.fnr-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fnr-choice:focus-within { outline: 2px solid var(--fnr-primary); outline-offset: 2px; }
.fnr-choice__key { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--fnr-line); font-weight: 700; font-size: 13px; flex: none; }
.fnr-choice input[type="checkbox"] + .fnr-choice__key { border-radius: 6px; }
.fnr-choice.is-selected { border-color: var(--fnr-primary); background: var(--fnr-primary-soft); }
.fnr-choice.is-selected .fnr-choice__key { background: var(--fnr-primary); border-color: var(--fnr-primary); color: #fff; }
.fnr-choice__text { padding-top: 2px; }

/* shared feedback states */
.fnr .is-right { border-color: var(--fnr-good) !important; background: var(--fnr-good-soft) !important; }
.fnr .is-wrong { border-color: var(--fnr-bad) !important; background: var(--fnr-bad-soft) !important; }
.fnr .is-missed { border-color: var(--fnr-missed) !important; background: var(--fnr-missed-soft) !important; border-style: dashed !important; }
.fnr-choice.is-right .fnr-choice__key { background: var(--fnr-good); border-color: var(--fnr-good); color: #fff; }
.fnr-choice.is-wrong .fnr-choice__key { background: var(--fnr-bad); border-color: var(--fnr-bad); color: #fff; }

/* numeric */
.fnr-numeric { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px; border: 1.5px solid transparent; border-radius: var(--fnr-radius-sm); }
.fnr-numeric__input { font: inherit; font-size: 20px; width: 180px; padding: 10px 12px; border: 1.5px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); }
.fnr-numeric__input:focus { outline: none; border-color: var(--fnr-primary); }
.fnr-numeric__unit { font-weight: 700; }
.fnr-numeric small { flex-basis: 100%; }

/* ordered */
.fnr-order { list-style: none; counter-reset: fnr-order; margin: 0; padding: 0; display: grid; gap: 8px; }
.fnr-order__item { counter-increment: fnr-order; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); background: var(--fnr-surface); cursor: grab; }
.fnr-order__item::before { content: counter(fnr-order); font-weight: 700; color: var(--fnr-primary); width: 20px; text-align: center; }
.fnr-order__item.is-dragging { opacity: .5; }
.fnr-order__grip { color: var(--fnr-muted); letter-spacing: -2px; }
.fnr-order__text { flex: 1; }
.fnr-order__btns { display: flex; gap: 4px; }
.fnr-order.is-locked .fnr-order__item { cursor: default; }

/* hotspot */
.fnr-hotspot { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; border: 2px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); overflow: hidden; line-height: 0; }
.fnr-hotspot img { display: block; user-select: none; }
.fnr-hotspot.is-locked { cursor: default; }
.fnr-hotspot__pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; background: var(--fnr-accent); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: pointer; padding: 0; }
.fnr-hotspot__key, .fnr-hotspot-key { position: absolute; border: 3px solid var(--fnr-good); background: rgba(21, 128, 61, .18); border-radius: 6px; pointer-events: none; }
.fnr-hotspot-review { position: relative; display: inline-block; line-height: 0; max-width: 100%; }

/* matrix & tables */
.fnr-matrix { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); overflow: hidden; font-size: 15px; }
.fnr-matrix th, .fnr-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--fnr-line); text-align: center; }
.fnr-matrix thead th { background: var(--fnr-surface-2); font-size: 14px; }
.fnr-matrix tbody th { text-align: left; font-weight: 500; }
.fnr-matrix tr:last-child > * { border-bottom: 0; }
.fnr-matrix td { border-left: 1px solid var(--fnr-line); border: 1.5px solid transparent; border-bottom: 1px solid var(--fnr-line); }
.fnr-matrix__cell { display: grid; place-items: center; cursor: pointer; min-height: 28px; }
.fnr-matrix__cell input { width: 20px; height: 20px; accent-color: var(--fnr-primary); cursor: pointer; }

/* cloze */
.fnr-cloze { font-size: 17px; line-height: 2.1; }
.fnr-cloze__slot { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; border: 1.5px solid transparent; padding: 0 2px; }
.fnr-cloze__select { font: inherit; font-size: 15px; padding: 4px 8px; border: 1.5px solid var(--fnr-primary); border-radius: 6px; background: var(--fnr-primary-soft); color: var(--fnr-ink); max-width: 100%; }
.fnr-cloze__fix { font-size: 13px; font-weight: 700; color: var(--fnr-good); background: var(--fnr-good-soft); padding: 0 6px; border-radius: 4px; line-height: 1.6; }

/* tokens / zones (dyad, triad, bow-tie) */
.fnr-rationale__sentence { font-size: 17px; line-height: 2.6; margin-bottom: 18px; }
.fnr-zone { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; min-height: 40px; padding: 3px; margin: 0 2px; vertical-align: middle; border: 2px dashed #94c9d6; border-radius: var(--fnr-radius-sm); background: var(--fnr-surface-2); line-height: 1.3; transition: background .15s, border-color .15s; }
.fnr-zone:empty::before { content: attr(data-placeholder); color: var(--fnr-muted); font-size: 13px; padding: 0 8px; }
.fnr-zone.is-over { background: var(--fnr-primary-soft); border-color: var(--fnr-primary); }
.fnr-zone.is-filled { border-style: solid; border-color: var(--fnr-primary); }
.fnr-bank { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: var(--fnr-radius-sm); background: var(--fnr-surface-2); border: 1px solid var(--fnr-line); min-height: 58px; }
.fnr-token { font: inherit; font-size: 15px; line-height: 1.3; padding: 8px 12px; border: 1.5px solid var(--fnr-line); border-radius: 8px; background: var(--fnr-surface); color: var(--fnr-ink); cursor: grab; text-align: left; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.fnr-token:hover { border-color: var(--fnr-primary); }
.fnr-token.is-picked { border-color: var(--fnr-primary); background: var(--fnr-primary-soft); box-shadow: 0 0 0 3px rgba(14, 116, 144, .25); }
.fnr-zone .fnr-token { width: 100%; cursor: pointer; }
.is-locked .fnr-token { cursor: default; }

.fnr-bowtie__tie { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: center; margin-bottom: 20px; position: relative; }
.fnr-bowtie__tie::before { content: ""; position: absolute; inset: 20% 30%; border-left: 2px solid var(--fnr-line); border-right: 2px solid var(--fnr-line); transform: skewX(0); pointer-events: none; }
.fnr-bowtie__col { display: grid; gap: 12px; position: relative; z-index: 1; }
.fnr-bowtie__col--conditions .fnr-zone { min-height: 72px; border-color: var(--fnr-accent); }
.fnr-bowtie__col .fnr-zone { display: flex; width: 100%; min-width: 0; margin: 0; }
.fnr-bowtie__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fnr-muted); text-align: center; }
.fnr-bowtie__banks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fnr-bowtie__bank { display: grid; gap: 8px; align-content: start; }
.fnr-bowtie__bank .fnr-bank { flex-direction: column; }

/* highlight */
.fnr-note { padding: 18px 20px; background: #fffdf5; border: 1px solid #f1e3b3; border-left: 4px solid #eab308; border-radius: var(--fnr-radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.9; white-space: normal; }
.fnr-hl { cursor: pointer; border-radius: 4px; padding: 1px 2px; border: 1.5px solid transparent; border-bottom: 1.5px dotted #94a3b8; transition: background .1s; }
.fnr-hl:hover { background: #fef9c3; }
.fnr-hl.is-selected { background: #fde047; border-color: #eab308; }
.fnr-hl:focus-visible { outline: 2px solid var(--fnr-primary); }
.fnr-highlight.is-locked .fnr-hl { cursor: default; }
.fnr-hl-table td { text-align: left; }

/* feedback panel */
.fnr-feedback { margin-top: 24px; border-radius: var(--fnr-radius); padding: 18px 20px; border: 1px solid var(--fnr-line); background: var(--fnr-surface-2); display: grid; gap: 14px; animation: fnr-rise .25s ease; }
.fnr .fnr-feedback.is-right { background: var(--fnr-good-soft) !important; border-color: #86efac !important; }
.fnr-feedback.is-partial { background: var(--fnr-fair-soft); border-color: #fcd34d; }
.fnr .fnr-feedback.is-wrong { background: #fff5f5 !important; border-color: #fecaca !important; }
.fnr-feedback__head { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; }
.fnr-feedback.is-right .fnr-feedback__head strong { color: var(--fnr-good); }
.fnr-feedback.is-partial .fnr-feedback__head strong { color: var(--fnr-fair); }
.fnr-feedback.is-wrong .fnr-feedback__head strong { color: var(--fnr-bad); }
.fnr-feedback h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--fnr-muted); }
.fnr-feedback__rationale, .fnr-feedback__key, .fnr-feedback__refs { background: var(--fnr-surface); border-radius: var(--fnr-radius-sm); padding: 14px 16px; }
.fnr-feedback__refs ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--fnr-ink-2); }
.fnr-key-list { margin: 0; padding-left: 20px; }
.fnr-key-fill { background: var(--fnr-good-soft); color: var(--fnr-good); padding: 0 6px; border-radius: 4px; }
@keyframes fnr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* case study */
.fnr-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.fnr-ehr { padding: 18px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.fnr-ehr__head h3 { margin: 8px 0 2px; font-size: 18px; }
.fnr-ehr__step { margin: 0; font-size: 14px; color: var(--fnr-accent); font-weight: 600; }
.fnr-ncjmm { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.fnr-ncjmm li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.fnr-ncjmm__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fnr-line); font-size: 12px; font-weight: 700; color: var(--fnr-muted); }
.fnr-ncjmm__label { font-size: 10px; line-height: 1.2; color: var(--fnr-muted); }
.fnr-ncjmm li.is-done .fnr-ncjmm__num { background: var(--fnr-good); color: #fff; }
.fnr-ncjmm li.is-current .fnr-ncjmm__num { background: var(--fnr-accent); color: #fff; box-shadow: 0 0 0 3px #fed7aa; }
.fnr-ncjmm li.is-current .fnr-ncjmm__label { color: var(--fnr-ink); font-weight: 600; }
.fnr-ehr__scenario { margin: 0 0 12px; border: 1px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); padding: 10px 12px; font-size: 15px; }
.fnr-ehr__scenario summary { cursor: pointer; font-weight: 600; }
.fnr-ehr__tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--fnr-line); }
.fnr-ehr__tab { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; border: 0; background: none; color: var(--fnr-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; display: inline-flex; gap: 6px; align-items: center; }
.fnr-ehr__tab.is-active { color: var(--fnr-primary); border-bottom-color: var(--fnr-primary); }
.fnr-ehr__new { font-size: 10px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--fnr-accent); color: #fff; }
.fnr-ehr__panel { padding: 14px 2px 0; font-size: 15px; }
.fnr-ehr-update { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--fnr-line); background: var(--fnr-surface-2); border-radius: 0 6px 6px 0; }
.fnr-ehr-update.is-new { border-left-color: var(--fnr-accent); background: #fff7ed; }
.fnr-ehr-update__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fnr-muted); margin-bottom: 4px; }

/* results */
.fnr-results__hero { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center; padding: clamp(20px, 4vw, 36px); }
.fnr-ring { position: relative; width: 180px; height: 180px; }
.fnr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fnr-ring__bg { fill: none; stroke: var(--fnr-line); stroke-width: 10; }
.fnr-ring__fg { fill: none; stroke: var(--fnr-primary); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.fnr-ring.is-pass .fnr-ring__fg { stroke: var(--fnr-good); }
.fnr-ring.is-fail .fnr-ring__fg { stroke: var(--fnr-accent); }
.fnr-ring__value { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fnr-ring__value strong { font-size: 40px; line-height: 1; }
.fnr-ring__value span { font-size: 12px; color: var(--fnr-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.fnr-results__title { margin: 10px 0 6px; font-size: 26px; }
.fnr-results__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fnr-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.fnr-results__grid .fnr-card { padding: 20px; }
.fnr-results__grid h3 { margin-top: 0; font-size: 17px; }
.fnr-results__review { margin-top: 24px; }
.fnr-review { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: fnr-review; }
.fnr-review__item { counter-increment: fnr-review; border: 1px solid var(--fnr-line); border-left: 4px solid var(--fnr-line); border-radius: var(--fnr-radius-sm); padding: 16px 18px; background: var(--fnr-surface); display: grid; gap: 12px; }
.fnr-review__item--right { border-left-color: var(--fnr-good); }
.fnr-review__item--wrong { border-left-color: var(--fnr-bad); }
.fnr-review__item--partial { border-left-color: #d97706; }
.fnr-review__head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fnr-review__head::before { content: counter(fnr-review) "."; font-weight: 700; }
.fnr-review__item .fnr-feedback__key, .fnr-review__item .fnr-feedback__rationale, .fnr-review__item .fnr-feedback__refs { background: var(--fnr-surface-2); padding: 12px 14px; border-radius: var(--fnr-radius-sm); }
.fnr-review h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--fnr-muted); }

/* ---- responsive ------------------------------------------------------ */

@media (max-width: 960px) {
	.fnr-hero__grid { grid-template-columns: 1fr; }
	.fnr-cta-card { margin-bottom: 0; }
	.fnr-course__body { margin: 0 auto; }
	.fnr-dash-perf { grid-template-columns: 1fr; }
	.fnr-case { grid-template-columns: 1fr; }
	.fnr-ehr { position: static; max-height: none; }
	.fnr-player { grid-template-columns: 1fr; }
	.fnr-player__sidebar { display: none; position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--fnr-line); }
	.fnr-player.is-sidebar-open .fnr-player__sidebar { display: block; }
	.fnr-player__toggle { display: inline-flex; }
}

@media (max-width: 640px) {
	.fnr-wrap { padding: 0 16px; }
	.fnr-hero { padding: 36px 0; }
	.fnr-results__hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.fnr-results__actions, .fnr-results__summary .fnr-facts { justify-content: center; }
	.fnr-bars__row { grid-template-columns: 1fr 60px; }
	.fnr-bars__track { grid-column: 1 / -1; grid-row: 2; }
	.fnr-bowtie__tie, .fnr-bowtie__banks { grid-template-columns: 1fr; }
	.fnr-bowtie__tie::before { display: none; }
	.fnr-zone { min-width: 120px; }
	.fnr-player__nav { grid-template-columns: 1fr 1fr; }
	.fnr-player__nav > button { grid-column: 1 / -1; grid-row: 1; }
	.fnr-ncjmm__label { display: none; }
	.fnr-q__actions .fnr-btn { width: 100%; }
}

/* ---- NGN: multiple response grouping, select N, trend ----------------- */

.fnr-mrg tbody th { width: 28%; vertical-align: top; font-weight: 600; }
.fnr-mrg td { text-align: left; vertical-align: top; }
.fnr-mrg__opts { display: grid; gap: 8px; }
.fnr-mrg__opt { padding: 8px 12px; }
.fnr-q__counter { font-style: normal; font-weight: 600; color: var(--fnr-primary); margin-left: 6px; }
.fnr-choice:has(input:disabled:not(:checked)) { opacity: .55; cursor: not-allowed; }
.fnr-trend .fnr-ehr__head .fnr-badge { background: var(--fnr-primary-soft); color: var(--fnr-primary-strong); }