:root {
    --fpa-frame: #07110F;
    --fpa-frame-2: #0A1714;
    --fpa-frame-line: #1B2A27;
    --fpa-sheet: #F7F4EC;
    --fpa-cream: #EFEAD9;
    --fpa-paper: #FBF9F3;
    --fpa-ink: #07110F;
    --fpa-ink-soft: #3D4A46;
    --fpa-muted: #5C6A64;
    --fpa-on-dark: #EAF2F2;
    --fpa-on-dark-2: #B9C7C7;
    --fpa-teal: #159E9E;
    --fpa-teal-hover: #1FB5B5;
    --fpa-teal-border: #0F8F8F;
    --fpa-teal-soft: #7FD8D8;
    --fpa-link: #0B6B6B;
    --fpa-link-dark: #7FD8D8;
    --fpa-orange: #D67617;
    --fpa-ok: #2E6B45;
    --fpa-ok-bg: #E7EFE3;
    --fpa-bad: #A94438;
    --fpa-bad-bg: #F4E7E2;
    --fpa-line: #E2DCCC;
    --fpa-radius: 12px;
    --fpa-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- The frame + sheet ---- */
.fpa-app {
    background: var(--fpa-frame) !important;
    color: var(--fpa-on-dark) !important;
    font-family: var(--fpa-sans) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    min-height: 70vh !important;
    margin: 0 !important;
    padding: 22px !important;
    box-sizing: border-box !important;
}

/* FIX: printCleanReport() prints .fpa-printable content in complete
   isolation (a fresh window, no .fpa-app wrapper around it) — font-
   family was only ever declared on .fpa-app, so anything printed this
   way silently fell back to the browser's own default serif font.
   Same explicit declaration .fpa-cert-sheet already has, which is why
   the certificate's print never had this problem. */
.fpa-printable {
    font-family: var(--fpa-sans) !important;
    color: var(--fpa-ink) !important;
}

.fpa-sheet {
    background: var(--fpa-sheet) !important;
    border-radius: 16px !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.03) !important;
    display: grid !important;
    grid-template-columns: 288px 1fr !important;
    min-height: 60vh !important;
    position: relative !important;
}

.fpa-single .fpa-sheet {
    grid-template-columns: 1fr !important;
}

/* progress page */
/* ---- Left sidebar (inside the sheet) ---- */
.fpa-side {
    background: var(--fpa-cream) !important;
    border-right: 1px solid var(--fpa-line) !important;
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.fpa-side .fpa-kicker {
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.fpa-side h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin: 2px 0 0 !important;
    line-height: 1.25 !important;
    color: var(--fpa-ink) !important;
}
div#fpa-gapmap-bars a {
    color: var(--fpa-ink) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
}
.fpa-side-back {
    font-size: 13px !important;
    color: var(--fpa-link) !important;
    text-decoration: none !important;
}

.fpa-side-progress {
    font-size: 13px !important;
    color: var(--fpa-ink-soft) !important;
    font-weight: 500 !important;
}

.fpa-side-bar {
    height: 6px !important;
    background: #E5DFCF !important;
    border-radius: 3px !important;
    margin-top: 6px !important;
}

.fpa-side-bar > div {
    height: 6px !important;
    background: var(--fpa-teal) !important;
    border-radius: 3px !important;
}

.fpa-side-tree {
    margin-top: 14px !important;
    font-size: 13.5px !important;
    display: flex !important;
    flex-direction: column !important;
}

.fpa-dom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 7px 8px !important;
    margin: 2px -8px !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    color: var(--fpa-ink-soft) !important;
    cursor: pointer !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    text-decoration: none !important;
}

.fpa-dom:hover {
    text-decoration: none !important;
    background: #EDE7D6 !important;
}

.fpa-dom.fpa-open {
    background: #fff !important;
    border: 1px solid var(--fpa-line) !important;
    color: var(--fpa-ink) !important;
}

.fpa-dom.fpa-open:hover {
    background: #fff !important;
}

.fpa-dom.fpa-active {
    font-weight: 700 !important;
    background: #fff !important;
    border: 1px solid var(--fpa-line) !important;
    color: var(--fpa-ink) !important;
}

.fpa-dom.fpa-active:hover {
    /* background: var(--fpa-teal-soft) !important; */
}

.fpa-dom-pct {
    font-weight: 500 !important;
    color: var(--fpa-muted) !important;
    font-size: 12px !important;
}

.fpa-fold-toggle {
    display: inline-block !important;
    width: 16px !important;
    text-align: center !important;
    margin-left: 6px !important;
    color: var(--fpa-muted) !important;
    cursor: pointer !important;
}
.fpa-fold-toggle:hover {
    color: var(--fpa-ink) !important;
}

.fpa-node-children {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 10px;
}

.fpa-node-children[hidden] {
    display: none !important;
}

/* Leaf rows (lessons) */
.fpa-leaf {
    display: flex !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 5px 0 5px 14px !important;
    color: var(--fpa-ink-soft) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
}

.fpa-leaf.fpa-now {
    color: var(--fpa-link) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--fpa-teal) !important;
    padding-left: 11px !important;
    background: #EAF4F3 !important;
    border-radius: 0 6px 6px 0 !important;
}

/* Legend styling lives in fpa-navrail.css (.fpa-legend / .l-done / .l-current /
   .l-flagged / .l-todo — the 2x2 grid version). This duplicate rule used to
   override it with a single-row flex layout; removed so the correct one wins. */

.fpa-railfoot {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--fpa-line) !important;
    font-size: 13px !important;
}

.fpa-railfoot a {
    color: var(--fpa-link) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 3px 0 !important;
}

.fpa-position-line {
    font-size: 13px !important;
    color: var(--fpa-muted) !important;
    margin: 0 0 6px !important;
}

/* Mobile rail toggle button + close button, hidden on desktop */
.fpa-rail-toggle,
.fpa-rail-close {
    display: none !important;
}

.fpa-sheet.fpa-exam-full {
    grid-template-columns: 1fr !important;
}
.fpa-sheet.fpa-exam-full .fpa-side {
    display: none !important;
}

/* ---- Main column ---- */
.fpa-main {
    padding: 26px 30px 34px !important;
    min-width: 0 !important;
    background: var(--fpa-sheet) !important;
    color: var(--fpa-ink) !important;
}

.fpa-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-bottom: 18px !important;
}

.fpa-head h1 {
    margin: 2px 0 0 !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    letter-spacing: -0.01em !important;
    color: var(--fpa-ink) !important;
}

.fpa-head a {
    color: var(--fpa-link) !important;
    text-decoration: none !important;
}

.fpa-kicker {
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
}

.fpa-ai-chip {
    font-size: 12px !important;
    color: var(--fpa-link) !important;
    background: transparent !important;
    border: 1px solid var(--fpa-teal-border) !important;
    padding: 4px 10px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
}

.fpa-muted {
    color: var(--fpa-muted) !important;
    font-size: 14px !important;
}

.fpa-notice {
    background: var(--fpa-cream) !important;
    border: 1px solid var(--fpa-line) !important;
    border-left: 3px solid var(--fpa-orange) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    margin: 10px 0 !important;
    color: black;
}

/* FIX (client, "Last things before go-live", item 2, design polish —
   screen-set 26 Aug 2026): exact match to the screen-set's own
   .banner — background:panel, teal left border, no full border. Used
   for the informational "Lesson check done"/"Lesson complete" banners
   (screens 1 and 2) — .fpa-notice above is a DIFFERENT, orange-
   bordered style meant for warnings elsewhere in the app; reusing it
   for these was the wrong colour. */
.fpa-banner-teal {
    background: #F4F1E8 !important;
    border: none !important;
    border-left: 3px solid var(--fpa-teal) !important;
    border-radius: 10px !important;
    padding: 15px 17px !important;
    margin: 10px 0 !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
.fpa-banner-teal .fpa-btn {
    flex: none !important;
}

/* FIX (client, "Last things before go-live", item 2): persistent
   "Return to your exam" banner — sticky so it stays in view while
   scrolling, teal like the app's other informational chips. */
.fpa-exam-resume-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--fpa-teal) !important;
    color: #fff !important;
    padding: 10px 16px !important;
    margin: -26px -30px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
.fpa-exam-resume-banner .fpa-btn {
    flex: none !important;
    background: #fff !important;
    color: var(--fpa-teal-border) !important;
    border-color: #fff !important;
}

.fpa-main h2 {
    font-weight: 600 !important;
    font-size: 19px !important;
    margin: 22px 0 10px !important;
    color: var(--fpa-ink) !important;
}

.fpa-session {
    background: var(--fpa-cream) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 14px 18px !important;
    margin-bottom: 18px !important;
}

.fpa-session-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.fpa-goals {
    margin: 6px 0 0 !important;
    padding-left: 20px !important;
}

.fpa-goals li::marker {
    color: var(--fpa-teal) !important;
}

.fpa-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 0 18px !important;
}

.fpa-metric {
    background: white;
    border: 1px solid var(--fpa-line) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 12px 14px !important;
}

.fpa-mlabel {
    margin: 0 !important;
    font-size: 11px !important;
    color: var(--fpa-muted) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.fpa-mvalue {
    margin: 4px 0 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--fpa-ink) !important;
}

.fpa-mexp {
    margin: 2px 0 0 !important;
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
}

.fpa-row-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 18px 0 !important;
}
.fpa-lesson-complete-actions {
    flex-wrap: nowrap !important;
}

.fpa-lesson-complete-actions .fpa-btn-trim {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
.fpa-lesson-complete-actions .fpa-btn:not(.fpa-btn-trim) {
    flex: 0 0 auto !important;
}

.fpa-sm {
    padding: 6px 14px !important;
    font-size: 13.5px !important;
}

.fpa-linkbtn {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--fpa-link) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    font-size: inherit !important;
    font-family: inherit !important;
}

/* Tree nodes: legacy container kept for non-rail inline uses (tools list) */
.fpa-node {
    padding: 8px 0px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    font-size: 14px !important;
    color: var(--fpa-ink) !important;
}

.fpa-scenario-card {
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    margin: 10px 0 !important;
}

.fpa-scenario-card a {
    text-decoration: none !important;
    color: var(--fpa-ink) !important;
    display: block !important;
}

.fpa-scenario-card strong {
    display: block !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
}

.fpa-scenario-card span {
    display: block !important;
    font-size: 13.5px !important;
    color: var(--fpa-ink-soft) !important;
}

.fpa-conv-banner {
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin: 12px 0 !important;
}

.fpa-conv-banner p {
    margin: 0 0 8px !important;
    font-size: 14.5px !important;
    color: var(--fpa-ink) !important;
}

.fpa-conv-banner a {
    color: var(--fpa-teal) !important;
    text-decoration: underline !important;
    font-size: 14.5px !important;
}

.fpa-node a {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.fpa-node a:hover {
    text-decoration: none !important;
}

.fpa-side .fpa-node:hover {
    background: #EDE7D6 !important;
}

.fpa-st {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
    line-height: 11px !important;
}

div#fpa-question-box span.fpa-st {
    margin-right: 5px;
    margin-bottom: -2px !important;
}

.fpa-st-done {
    background: var(--fpa-ok) !important;
    color: #fff !important;
}

.fpa-st-now {
    background: var(--fpa-teal) !important;
    color: #fff !important;
}

.fpa-st-flag {
    background: #fff !important;
    border: 2px solid var(--fpa-orange) !important;
    color: var(--fpa-orange) !important;
}

.fpa-st-todo {
    background: transparent !important;
    border: 2px solid #CFC9BB !important;
}

.fpa-st-sm {
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    font-size: 8px !important;
}

.fpa-btn {
    display: inline-block !important;
    padding: 9px 18px !important;
    border: 1px solid var(--fpa-teal-border) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--fpa-ink) !important;
    background: white !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-family: var(--fpa-sans) !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.fpa-btn:hover {
    background: #159E9E !important;
    color: white !important;
}

.fpa-btn:active {
    background: #0d7a7a !important;
    color: white !important;
}

.fpa-primary, .fpa-next, .fpa-session button[type="submit"] {
    background: var(--fpa-teal) !important;
    border: 1px solid var(--fpa-teal) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: var(--fpa-sans) !important;
    font-size: 15px !important;
}

.fpa-primary:hover, .fpa-next:hover, .fpa-session button[type="submit"]:hover {
    background: var(--fpa-teal-hover) !important;
    text-decoration: none !important;
}

.fpa-foot {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-top: 22px !important;
}

.fpa-qcard {
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 12px !important;
    padding: 22px !important;
}

.fpa-scenario {
    background: var(--fpa-cream) !important;
    border-left: 3px solid var(--fpa-teal) !important;
    padding: 10px 14px !important;
    border-radius: 0 8px 8px 0 !important;
    margin-bottom: 20px !important;
}

.fpa-qtext {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--fpa-ink) !important;
}

.fpa-opts {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 14px 0 !important;
}

.fpa-opt {
    text-align: left !important;
    padding: 11px 14px !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 8px !important;
    background: white !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-family: var(--fpa-sans) !important;
    color: var(--fpa-ink) !important;
    line-height: 20px;
}

.fpa-opt:hover:not(:disabled) {
    border-color: var(--fpa-teal) !important;
}

.fpa-opt-correct {
    background: var(--fpa-ok-bg) !important;
    border-color: var(--fpa-ok) !important;
    position: relative !important;
    padding-right: 90px !important;
}

.fpa-opt-wrong {
    background: var(--fpa-bad-bg) !important;
    border-color: var(--fpa-bad) !important;
    position: relative !important;
    padding-right: 90px !important;
}

.fpa-opt-tag {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.fpa-explain {
    color: var(--fpa-ink-soft) !important;
    font-size: 14.5px !important;
    margin: 8px 0 12px !important;
}

.fpa-explain p {
    margin: 0 0 10px !important;
}

.fpa-explain p:last-child {
    margin-bottom: 0 !important;
}

.fpa-situation {
    background: var(--fpa-cream) !important;
}

.fpa-situation .fpa-linesub {
    display: block !important;
    margin-top: 4px !important;
}

.fpa-situation .fpa-linesub:first-child {
    margin-top: 0 !important;
}

.fpa-bubble {
    margin: 10px 0 !important;
}

.fpa-card.fpa-bubble-you {
    background: #EAF4F3 !important;
    border-color: var(--fpa-teal) !important;
    display: flex;
}

.fpa-card.fpa-bubble p {
    margin: 0;
}

.fpa-card.fpa-situation {
    background: #F1EDE0 !important;
}

.fpa-ok {
    color: var(--fpa-ok) !important;
}

.fpa-bad {
    color: var(--fpa-bad) !important;
}

.fpa-askrow span {
    width: 100%;
}

.fpa-askrow {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 12px 0 !important;
    flex-wrap: wrap !important;
}

/* FIX (client, "Last things before go-live", item 2, design polish):
   .fpa-raterow — same look as .fpa-askrow above, but the label stays
   inline before the buttons (no forced 100%-width span), matching the
   screen-set's "Did you understand this? [Understood][Somewhat][Not]"
   single-line layout. */
.fpa-raterow {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 12px 0 !important;
    flex-wrap: wrap !important;
}
.fpa-raterow-lbl {
    font-size: 12.5px !important;
    color: var(--fpa-muted) !important;
}

.fpa-mini {
    padding: 10px 13px !important;
    border-radius: 8px !important;
    background: var(--fpa-paper) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--fpa-ink) !important;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid #e2dccc !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.fpa-mini.fpa-selected {
    background: var(--fpa-teal) !important;
    border-color: var(--fpa-teal) !important;
    color: #fff !important;
}

/* FIX (client, "Last things before go-live", item 2 — screen-set 26
   Aug 2026): the rating row's Understood/Not selections get their own
   colours here (green / light-orange), matching the screen-set's own
   .sel-green/.sel-orange exactly — Somewhat keeps the plain shared
   .fpa-selected (teal) look above, since the screen-set never gives it
   a distinct colour of its own. */
.fpa-mini.fpa-rate-green {
    background: var(--fpa-ok) !important;
    border-color: var(--fpa-ok) !important;
    color: #fff !important;
}
.fpa-mini.fpa-rate-orange {
    background: #FDF3E7 !important;
    border-color: var(--fpa-orange) !important;
    color: var(--fpa-orange) !important;
}

/* FIX (client, "Last things before go-live", item 2 — screen-set 26
   Aug 2026, design polish): pill badge, exact match to the screen-
   set's .pill — used next to a concept name for a short status word
   like "Flagged". */
.fpa-pill {
    display: inline-block !important;
    background: #FDF3E7 !important;
    color: var(--fpa-orange) !important;
    border: 1px solid var(--fpa-orange) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 1px 9px !important;
    margin-left: 6px !important;
}

.fpa-mini:disabled {
    cursor: default !important;
    opacity: 0.6 !important;
}

.fpa-mini.fpa-selected:disabled {
    opacity: 1 !important;
}

/* Arrival flow (Q1: A3-A6) — single column, no rail */
.fpa-arrival {
    max-width: 100% !important;
    margin: 0 auto !important;
}

.fpa-arrival-points {
    padding-left: 20px !important;
    margin: 14px 0 !important;
}

.fpa-arrival-points li {
    margin: 6px 0 !important;
    font-size: 14.5px !important;
    color: var(--fpa-ink-soft) !important;
}

.fpa-card {
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 18px !important;
    margin: 14px 0 !important;
}

.fpa-card h2 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

.fpa-card-q {
    margin: 0 0 10px !important;
    font-weight: 600 !important;
    color: var(--fpa-ink) !important;
    /* FIX: diagnostic sets this via textContent (correctly, XSS-safe)
       — but plain text's raw \n characters collapse to whitespace in
       normal HTML rendering. pre-line respects them as real line
       breaks without needing any HTML at all. */
    white-space: pre-line !important;
}

.fpa-opt.fpa-selected {
    background: #EAF4F3 !important;
    border-color: var(--fpa-teal) !important;
}

.fpa-opt-letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.fpa-timer {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--fpa-ink) !important;
    font-variant-numeric: tabular-nums !important;
}

.fpa-head-inline {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.fpa-head-inline h2 {
    font-size: 19px !important;
    margin: 4px 0 0 !important;
    color: #07110f !important;
}

.fpa-muted-inline {
    font-weight: 400 !important;
    font-size: 14px !important;
    color: var(--fpa-muted) !important;
}

.fpa-chip-plain {
    display: inline-block !important;
    padding: 5px 12px !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    color: var(--fpa-ink-soft) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    background: var(--fpa-paper) !important;
}

.fpa-chip-plain:hover {
    background: var(--fpa-cream) !important;
}

.fpa-chip-flagged {
    border-color: var(--fpa-orange) !important;
    color: var(--fpa-orange) !important;
    background: rgba(214, 118, 23, 0.08) !important;
}

.fpa-progress-thin {
    max-width: 300px !important;
    height: 5px !important;
    background: var(--fpa-line) !important;
    border-radius: 3px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

.fpa-progress-thin > div {
    height: 5px !important;
    background: var(--fpa-teal) !important;
}

.fpa-qgrid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 18px !important;
}

.fpa-qgrid button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    border: 1px solid var(--fpa-line) !important;
    background: var(--fpa-paper) !important;
    color: var(--fpa-ink) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 0;
}

.fpa-qgrid button.fpa-qg-answered {
    background: var(--fpa-teal) !important;
    border-color: var(--fpa-teal) !important;
    color: white !important;
}

.fpa-qgrid button.fpa-qg-now {
    box-shadow: 0 0 0 2px var(--fpa-teal-border) !important;
}

/* FIX: inline-style orange border on a bookmarked square barely read
   against the teal "answered" background — a plain colour-swap wasn't
   enough contrast at this size. A visible ring (like the current-
   question indicator above) survives regardless of the square's own
   background colour. */
.fpa-qgrid button.fpa-qg-bookmarked {
    box-shadow: 0 0 0 2px var(--fpa-orange) !important;
}

/* FIX (client, "Last things before go-live", item 3): bookmarked
   result cards get an orange border in the main overview, replacing
   the separate bookmark list that used to sit at the bottom. */
.fpa-card-bookmarked {
    border: 2px solid var(--fpa-orange) !important;
}

.fpa-panel {
    background: var(--fpa-cream) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 14px 18px !important;
}

.fpa-date-input {
    font-family: var(--fpa-sans) !important;
    padding: 8px 16px !important;
    border: 1px solid #e2dccc !important;
    border-radius: 5px !important;
    background: var(--fpa-paper) !important;
    color: var(--fpa-ink) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    width: auto !important;
}

.fpa-date-input:hover {
    background: var(--fpa-paper) !important;
}

.fpa-target-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #e2dccc !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    background: white !important;
    font-size: 14px !important;
    color: var(--fpa-ink) !important;
}

.fpa-target-pill::before {
    content: "\1F4C5";
}

.fpa-domainrow-gm {
    display: grid !important;
    grid-template-columns: 200px 1fr 44px !important;
    gap: 12px !important;
    align-items: center !important;
    margin: 8px 0 !important;
    font-size: 13.5px !important;
}

.fpa-linerow {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 14px !important;
}

.fpa-linesub {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--fpa-muted) !important;
    margin-top: 3px !important;
}

.fpa-legend-line {
    display: inline-block !important;
    width: 18px !important;
    height: 0 !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
}

.fpa-legend-solid {
    border-top: 2px solid var(--fpa-teal) !important;
}

.fpa-legend-dashed {
    border-top: 2px dashed var(--fpa-muted) !important;
}

.fpa-linerow-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
}

.fpa-assess-card {
    border-left: 4px solid var(--fpa-teal) !important;
}

.fpa-concepts-heading {
    font-size: 15px !important;
    color: var(--fpa-ink) !important;
    margin: 28px 0 10px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--fpa-line) !important;
}
.fpa-concepts-heading:first-of-type {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 10px !important;
}

.fpa-label-strong {
    font-size: 12.5px !important;
    color: var(--fpa-ok) !important;
    white-space: nowrap !important;
}

.fpa-label-focus-here {
    font-size: 12.5px !important;
    color: var(--fpa-orange) !important;
    white-space: nowrap !important;
}

.fpa-ghost {
    background: var(--fpa-paper) !important;
    border: 1px solid var(--fpa-line) !important;
    color: var(--fpa-ink) !important;
}
span.fpa-btn.fpa-sm.fpa-ghost {
    background: white !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
span.fpa-btn.fpa-sm.fpa-ghost:hover {
    background: #159E9E !important;
    color: white !important;
}
span.fpa-btn.fpa-sm.fpa-ghost:active {
    background: #0d7a7a !important;
    color: white !important;
}
span.fpa-btn.fpa-sm.fpa-ghost.fpa-active {
    background: var(--fpa-teal) !important;
    border-color: var(--fpa-teal) !important;
    color: white !important;
}
.fpa-locked {
    opacity: 0.75 !important;
}

.fpa-concept-card {
    cursor: default !important;
}

.fpa-concept-body {
    border-top: 1px solid var(--fpa-line) !important;
    margin-top: 12px !important;
    padding-top: 4px !important;
}

.fpa-fc {
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    text-align: center !important;
}

.fpa-fc-meta {
    font-size: 11.5px !important;
    color: var(--fpa-muted) !important;
    margin: 0 0 8px !important;
}

.fpa-fc-meta:last-child {
    margin: 8px 0 0 !important;
}

.fpa-fc-front {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--fpa-ink) !important;
    margin: 0 !important;
}

/* POINT 15 (client findings, 29 Aug): the front-only, not-yet-flipped
   state — term only, larger type, click to flip. */
.fpa-fc-flip {
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 20px 0 !important;
    text-align: center !important;
}

.fpa-fc-back {
    font-size: 15px !important;
    color: var(--fpa-ink) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--fpa-line) !important;
}

.fpa-fc-center {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.fpa-video {
    position: relative !important;
    aspect-ratio: 16/9 !important;
    background: var(--fpa-frame) !important;
    border-radius: var(--fpa-radius) !important;
    margin: 14px 0 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    display: flex !important;
    max-width: 66ch;
    align-items: center !important;
    justify-content: center !important;
}

.fpa-video-play {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--fpa-teal) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

.fpa-video iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

.fpa-metrics-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.fpa-mini:hover {
    background: #159E9E !important;
    color: white !important;
}

.fpa-mini:active {
    background: #0d7a7a !important;
    color: white !important;
}

.fpa-depths.fpa-card {
    margin-top: 16px !important;
    border: none !important;
    padding: 0 !important;
}

.fpa-depths.fpa-card p.fpa-muted {
    margin-bottom: 10px !important;
}

.fpa-depths {
    margin-top: 10px;
}

.fpa-depth {
    margin: 0 6px 6px 0 !important;
    padding: 10px 13px !important;
    border-radius: 8px !important;
    background: var(--fpa-paper) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--fpa-ink) !important;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid #e2dccc !important;
}

.fpa-depth:hover {
    border-color: var(--fpa-teal) !important;
    color: white !important;
    background: var(--fpa-teal) !important;
}

.fpa-depth.fpa-active {
    background: var(--fpa-teal) !important;
    border-color: var(--fpa-teal) !important;
    color: white !important;
}

.fpa-render {
    color: var(--fpa-ink-soft) !important;
    font-size: 14.5px !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--fpa-line) !important;
}

.fpa-content-text {
    color: var(--fpa-ink-soft) !important;
    font-size: 14.5px !important;
}

.fpa-content-text p {
    margin: 0 0 1.2em !important;
}

.fpa-content-text p:last-child {
    margin-bottom: 0 !important;
}

/* BUG 2.5 FIX: reusable animated spinner for loading states */
.fpa-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid var(--fpa-line) !important;
    border-top-color: var(--fpa-teal) !important;
    border-radius: 50% !important;
    animation: fpa-spin 0.7s linear infinite !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

@keyframes fpa-spin {
    to {
        transform: rotate(360deg);
    }
}

.fpa-render a {
    color: var(--fpa-link) !important;
}

.fpa-ainote {
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--fpa-line) !important;
    padding-top: 8px !important;
    margin-top: 10px !important;
}

/* Progress page (single column) */
.fpa-single .fpa-main {
    padding: 26px 34px 36px !important;
}

.fpa-domainrow {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.fpa-domainrow-toggle {
    cursor: pointer !important;
}

.fpa-domain-caret {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    color: var(--fpa-ink-soft) !important;
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 6px !important;
}

.fpa-domain-modules {
    margin: 6px 0 16px 6% !important;
}

.fpa-domainrow-indent {
    margin-bottom: 10px !important;
}

.fpa-domainrow-indent .fpa-domainname {
    width: calc(262px - 6%) !important;
    font-size: 13px !important;
}

.fpa-domainrow-indent .fpa-pct {
    text-align: left !important;
}

.fpa-domainrow .fpa-pct {
    text-align: left !important;
}

@media (max-width: 600px) {
    .fpa-domain-caret {
        width: 28px !important;
        height: 28px !important;
    }
    .fpa-domainrow-indent .fpa-domainname {
        font-size: 12px !important;
    }
    .fpa-qtype-bars {
        height: 70px !important;
        gap: 6px !important;
    }
    .fpa-qtype-col {
        width: 20px !important;
    }
    .fpa-qtype-val {
        font-size: 10px !important;
    }
    .fpa-qtype-labels {
        font-size: 10px !important;
        gap: 6px !important;
    }
    .fpa-qtype-fold-head {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
    .fpa-qtype-fold-pct {
        font-size: 12px !important;
    }
    .fpa-domainrow .fpa-domainname {
        font-size: 12px !important;
        width: auto !important;
        flex: 1 !important;
    }
}

.fpa-domainname {
    width: 220px !important;
    font-size: 14px !important;
    color: var(--fpa-ink-soft) !important;
}

.fpa-bar {
    flex: 1 !important;
    height: 8px !important;
    background: var(--fpa-cream) !important;
    border-radius: 4px !important;
}

.fpa-fill {
    height: 8px !important;
    background: var(--fpa-teal) !important;
    border-radius: 4px !important;
}

.fpa-fill-pale {
    background: var(--fpa-teal-light, #9fd4d4) !important;
}

.fpa-qtype-bars {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    height: 90px !important;
    gap: 12px !important;
    margin-top: 8px !important;
    border-bottom: 1px solid var(--fpa-line) !important;
    padding-bottom: 0 !important;
}

.fpa-qtype-vb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 1 !important;
    height: 100% !important;
}

.fpa-qtype-val {
    font-size: 12px !important;
    color: var(--fpa-ink-soft) !important;
    margin-bottom: 4px !important;
}

.fpa-qtype-col {
    display: block !important;
    width: 28px !important;
    background: var(--fpa-teal) !important;
    border-radius: 4px 4px 0 0 !important;
    min-height: 2px !important;
}

.fpa-qtype-low {
    background: var(--fpa-orange) !important;
}

.fpa-qtype-labels {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    color: var(--fpa-ink-soft) !important;
    text-align: center !important;
}

.fpa-qtype-labels div {
    flex: 1 !important;
}

.fpa-qtype-fold {
    border: 1px solid var(--fpa-line) !important;
    border-radius: 8px !important;
    margin-top: 8px !important;
    overflow: hidden !important;
}

.fpa-qtype-fold-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    border-bottom: 1px solid var(--fpa-line) !important;
}

.fpa-qtype-fold-head > span:first-child {
    flex: 1 !important;
}

.fpa-qtype-fold-pct {
    font-size: 14px !important;
    color: var(--fpa-ink) !important;
    white-space: nowrap !important;
}

p.fpa-linesub.fpa-qtype-result {
    margin: 8px 0 !important;
    padding: 8px 10px !important;
    background: #FFF3D6 !important;
    border: 1.5px dashed #e0a94b !important;
    border-radius: 6px !important;
}

.fpa-qtype-empty {
    color: var(--fpa-muted) !important;
    font-size: 13.5px !important;
    text-align: center !important;
    padding: 26px 10px !important;
    border: 1px dashed var(--fpa-line) !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    background: #FBFAF6 !important;
}

.fpa-qtype-fold > div:last-child {
    padding: 0 12px 12px !important;
}

.fpa-pct {
    width: 66px !important;
    font-size: 14px !important;
    color: var(--fpa-ink) !important;
    white-space: nowrap;
}

.fpa-flagrow {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--fpa-line) !important;
    border-left: 3px solid var(--fpa-orange) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 12px 16px !important;
    margin-top: 18px !important;
    flex-wrap: wrap !important;
    background: white !important;
}

.fpa-flagrow[hidden] {
    display: none !important;
}

#fpa-continue-row {
    border-left-color: var(--fpa-teal) !important;
}

.fpa-test-row {
    display: grid !important;
    grid-template-columns: 44px 1fr 190px auto !important;
    gap: 10px !important;
    align-items: center !important;
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: var(--fpa-radius) !important;
    padding: 11px 16px !important;
    margin: 8px 0 !important;
    font-size: 14.5px !important;
}

.fpa-test-row.fpa-test-unlocked,
.fpa-test-row.fpa-test-completed {
    border-left: 3px solid var(--fpa-teal) !important;
}

.fpa-test-n {
    font-weight: 600 !important;
    color: var(--fpa-ink-soft) !important;
    font-size: 13px !important;
}

.fpa-test-m {
    font-size: 12px !important;
    color: var(--fpa-ink-soft) !important;
    margin-top: 2px !important;
}

.fpa-test-row.fpa-test-locked .fpa-test-m {
    color: #9AA3A1 !important;
}

.fpa-test-bar {
    font-size: 11.5px !important;
    color: var(--fpa-ink-soft) !important;
}

.fpa-test-bar .fpa-bar {
    height: 6px !important;
    margin-bottom: 3px !important;
}

.fpa-locked-btn {
    color: #8F9795 !important;
    border-color: var(--fpa-line) !important;
    background: #FBFAF6 !important;
    cursor: not-allowed !important;
}

.fpa-test-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.fpa-test-actions .fpa-linkbtn {
    color: var(--fpa-teal) !important;
}

@media (max-width: 760px) {
    .fpa-test-row {
        grid-template-columns: 36px 1fr auto !important;
        padding: 10px 12px !important;
        font-size: 13.5px !important;
    }
    .fpa-test-bar {
        grid-column: 1 / -1 !important;
        margin-top: 4px !important;
    }
    .fpa-test-m {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .fpa-test-row {
        grid-template-columns: 28px 1fr !important;
        row-gap: 6px !important;
    }
    .fpa-test-n {
        font-size: 12px !important;
    }
    .fpa-test-bar,
    .fpa-test-actions,
    .fpa-locked-btn,
    .fpa-test-row .fpa-btn {
        grid-column: 1 / -1 !important;
    }
    .fpa-test-actions {
        justify-content: flex-start !important;
    }
}

.fpa-test-row.fpa-test-locked {
    color: #7C8482 !important;
}
.fpa-test-pass {
    color: var(--fpa-ok) !important;
    font-weight: 600 !important;
}
.fpa-test-fail {
    color: var(--fpa-orange) !important;
    font-weight: 600 !important;
}

.fpa-toggle {
    font-size: 14px !important;
    color: var(--fpa-ink-soft) !important;
}

/* Item 6: hide-scores toggle — one root-class, every score-dependent
   element carries fpa-score, hidden together in one rule. */
.fpa-no-scores .fpa-score {
    display: none !important;
}

.fpa-no-scores .fpa-domainrow .fpa-score {
    display: inline-block !important;
    visibility: hidden !important;
}

/* Course tiles + verify */
.fpa-my-courses {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

.fpa-course-tile {
    display: block !important;
    padding: 20px !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: var(--fpa-radius) !important;
    text-decoration: none !important;
    color: var(--fpa-ink) !important;
    background: var(--fpa-paper) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
}

.fpa-course-tile:hover {
    border-color: var(--fpa-teal) !important;
}

.fpa-verify input {
    padding: 8px 10px !important;
    margin-right: 8px !important;
    border: 1px solid var(--fpa-line) !important;
    border-radius: 8px !important;
    background: var(--fpa-paper) !important;
    color: var(--fpa-ink) !important;
}

.fpa-cert-verify {
    border-radius: var(--fpa-radius) !important;
    padding: 16px 20px !important;
    color: white !important;
}

/* ---- Printable certificate ---- */
.fpa-cert-actions {
    margin: 28px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.fpa-certificate {
    background: var(--fpa-frame) !important;
    padding: 34px !important;
}

.fpa-cert-sheet {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 60px 70px 50px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-family: var(--fpa-sans) !important;
    color: var(--fpa-ink) !important;
    background: var(--fpa-sheet) !important;
}

.fpa-cert-mark {
    display: block !important;
    margin: 0 auto 8px !important;
    height: auto !important;
}

.fpa-cert-caption {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--fpa-muted) !important;
    margin: 0 0 34px !important;
}

.fpa-cert-title {
    font-size: 15px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--fpa-ink-soft) !important;
    margin: 0 0 10px !important;
}

.fpa-cert-rule {
    width: 56px !important;
    height: 3px !important;
    background: var(--fpa-teal) !important;
    margin: 0 auto 34px !important;
    border-radius: 2px !important;
}

.fpa-cert-name {
    font-size: 38px !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.01em !important;
    color: var(--fpa-ink) !important;
    line-height: 37px !important;
}

.fpa-cert-line {
    font-size: 15px !important;
    color: var(--fpa-ink-soft) !important;
    margin: 0 0 6px !important;
}

.fpa-cert-course {
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 0 0 30px !important;
    color: var(--fpa-ink) !important;
}

.fpa-cert-meta {
    font-size: 13px !important;
    color: var(--fpa-ink-soft) !important;
    margin: 0 0 4px !important;
}

.fpa-cert-signature {
    margin: 30px 0 20px !important;
}
.fpa-cert-signature-issuedby {
    font-size: 11px !important;
    color: var(--fpa-muted) !important;
    margin: 0 0 10px !important;
}
.fpa-cert-signature-img {
    max-width: 160px !important;
    max-height: 60px !important;
    display: block !important;
    margin: 0 auto 8px !important;
}
.fpa-cert-signature-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--fpa-ink) !important;
    margin: 0 0 2px !important;
}
.fpa-cert-signature-role {
    font-size: 12px !important;
    color: var(--fpa-ink-soft) !important;
    margin: 0 !important;
}

.fpa-cert-ref {
    font-size: 12px !important;
    color: var(--fpa-muted) !important;
    margin: 0 !important;
}

.fpa-cert-privacy-note {
    font-size: 11px !important;
    color: var(--fpa-muted) !important;
    margin: 6px 0 0 !important;
    font-style: italic !important;
}

form.fpa-verify input, form.fpa-verify button {
    height: 45px !important;
    margin-top: 10px !important;
}

form.fpa-verify input {
    /* FIX: was inheriting white text with no explicit background,
       landing on white-on-white (unreadable while typing) — explicit
       colours here regardless of what the surrounding page sets. */
    color: var(--fpa-ink) !important;
    background: white !important;
    border: 1px solid var(--fpa-line) !important;
    padding: 0 12px !important;
}

/* FIX (reported again 5 Sept — the rule above alone wasn't holding
   up on :focus specifically): some other stylesheet loaded on this
   page sets white input text on focus. Repeating the same colours
   here, scoped to :focus with the input's own name for maximum
   specificity, so nothing else on the page can win this fight again. */
form.fpa-verify input[name="ref"]:focus {
    color: var(--fpa-ink) !important;
    background: white !important;
}

form.fpa-verify {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

a#fpa-continue {
    color: white !important;
}

form#fpa-session-form label {
    color: var(--fpa-ink) !important;
}

.fpa-qtext {
    margin: 0 !important;
}
.fpa-qtext p {
    margin: 0 !important;
}

div#fpa-question-box .fpa-qcard {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.fpa-my-courses {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

div#fpa-question-box h1 {
    font-size: 26px;
    color: #07110f;
}

div#fpa-hours-opts {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    margin: 14px 0 !important;
    flex-wrap: wrap;
}

button#fpa-skip-arrival:hover , button#fpa-diag-skip:hover {
    background-color: #159E9E !important;
    color: white !important;
}

/* ---- Group C: Testing (C1-C4) ---- */
.fpa-c1-rules { margin: 4px 0 18px !important; padding-left: 20px !important; color: var(--fpa-ink-soft) !important; font-size: 14px !important; }
.fpa-c1-rules li { margin-bottom: 6px !important; }

.fpa-exam-head { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; margin-bottom: 16px !important; gap: 16px !important; }
.fpa-exam-head h2 { font-size: 19px !important; margin: 4px 0 0 !important; }
.fpa-exam-timer-wrap { text-align: right !important; margin-right: 10px !important; }
.fpa-exam-timer { font-size: 20px !important; font-weight: 700 !important; color: var(--fpa-ink) !important; font-variant-numeric: tabular-nums !important; display: block !important; }
.fpa-exam-timer.fpa-exam-low { color: var(--fpa-bad) !important; }
.fpa-exam-headright { display: flex !important; align-items: center !important; gap: 14px !important; }

.fpa-exam-grid { display: grid !important; grid-template-columns: 1fr 1.3fr !important; gap: 16px !important; margin-bottom: 16px !important; align-items: start !important; }

.fpa-exam-scenario { background: var(--fpa-cream) !important; }
.fpa-exam-scenario p.fpa-scenario-text { margin: 6px 0 0 !important; font-size: 14px !important; color: var(--fpa-ink-soft) !important; max-height: 186px !important; overflow: hidden !important; }
.fpa-exam-scenario.fpa-expanded p.fpa-scenario-text { max-height: none !important; }
.fpa-exam-scenario-toggle { display: inline-block !important; margin-top: 10px !important; font-size: 12.5px !important; color: var(--fpa-link) !important; cursor: pointer !important; }

.fpa-exam-footrow { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 4px !important; }
.fpa-exam-qgrid-wrap { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin-top: 14px !important; }
.fpa-exam-qgrid {
    display: flex !important;
    /* FIX: this was 'nowrap' from the old 10-at-a-time paging (a small,
       fixed count that always fit on one line). Now every question in
       the sitting renders here (client asked to match diagnostic's
       show-everything grid), so up to 100 buttons need to wrap onto
       multiple rows instead of overflowing off-screen with no way to
       reach them. */
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 0 !important;
}
.fpa-exam-qgrid button { width: 34px !important; height: 34px !important; padding: 0 !important; flex: 0 0 auto !important; }
.fpa-exam-qgrid button.fpa-now { outline: 2px solid var(--fpa-ink) !important; outline-offset: 1px !important; }

.fpa-result-row { display: grid !important; grid-template-columns: auto 1fr auto !important; gap: 12px !important; align-items: center !important; }
.fpa-result-x { color: var(--fpa-bad) !important; font-weight: 700 !important; }
.fpa-dombar-row { display: grid !important; grid-template-columns: 170px 1fr 44px !important; gap: 12px !important; align-items: center !important; margin: 8px 0 !important; font-size: 13.5px !important; }
.fpa-dombar-track { height: 8px !important; background: var(--fpa-cream) !important; border-radius: 4px !important; }
.fpa-dombar-fill { height: 8px !important; border-radius: 4px !important; background: var(--fpa-teal) !important; }
.fpa-domain-block { margin: 22px 0 10px !important; }
.fpa-domain-block h3 { font-size: 16px !important; margin: 0 0 10px !important; color: #1e2b26; }
.fpa-disabled { pointer-events: none !important; cursor: not-allowed !important; opacity: 0.5 !important; }

h1.sheet-heading {
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    letter-spacing: -0.01em !important;
    color: var(--fpa-ink) !important;
}
div#fpa-question-box[data-context="module_test"] .fpa-concept-body .fpa-opt,
div#fpa-question-box[data-context="final_exam"] .fpa-concept-body .fpa-opt,
div#fpa-question-box[data-context="domain_exam"] .fpa-concept-body .fpa-opt {
    margin: 7px 0px;
}

.fpa-sheet[data-context="module_assessment"] header.fpa-head,
.fpa-sheet[data-context="lesson_browse"] header.fpa-head,
.fpa-sheet[data-context="lesson_check"] header.fpa-head,
.fpa-sheet[data-context="repetition"] header.fpa-head,
.fpa-sheet[data-context="scenario"] header.fpa-head,
.fpa-sheet[data-context="module_test"] header.fpa-head,
.fpa-sheet[data-context="domain_exam"] header.fpa-head,
.fpa-sheet[data-context="final_exam"] header.fpa-head,
.fpa-sheet[data-context="module_intro"] header.fpa-head,
.fpa-sheet[data-context="domain_intro"] header.fpa-head {
    display: none !important;
}

.fpa-verify-wrap { max-width: 600px !important; margin: 40px auto !important; padding: 30px !important; background: var(--fpa-paper) !important; border-radius: var(--fpa-radius) !important; border: 1px solid var(--fpa-line) !important; }
.fpa-verify-table { width: 100% !important; border-collapse: collapse !important; margin: 18px 0 !important; }
.fpa-verify-table th, .fpa-verify-table td {text-align: left !important;padding: 10px 10px !important;border-bottom: 1px solid var(--fpa-line) !important;font-size: 14.5px !important;}
.fpa-verify-table th { width: 130px !important; color: var(--fpa-muted) !important; font-weight: 600 !important; vertical-align: top !important; }
.fpa-verify-table td { color: var(--fpa-ink) !important; }

.fpa-p-grid2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin: 18px 0 !important; }

.fpa-p-grid2 .fpa-card { padding: 16px !important; }

.rail img.logo {
    height: 40px !important;
    margin-bottom: 14px !important;
    display: block !important;
    align-self: flex-start !important;
}

.fpa-cert-brand-text { font-size: 13px !important; letter-spacing: 0.28em !important; color: var(--fpa-ink) !important; margin: 0 0 6px !important; font-weight: 600 !important; }

.fpa-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(7,17,15,0.65) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9999 !important; padding: 20px !important; }
.fpa-modal { background: var(--fpa-paper) !important; border-radius: var(--fpa-radius) !important; padding: 26px !important; max-width: 420px !important; width: 100% !important; box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important; }
.fpa-modal h2 { font-size: 18px !important; margin: 0 0 10px !important; color: var(--fpa-ink) !important; }
.fpa-modal p { font-size: 14.5px !important; color: var(--fpa-ink-soft) !important; margin: 0 0 20px !important; line-height: 1.5 !important; }
.fpa-modal .fpa-row-actions { margin: 0 !important; }

.fpa-state-sheet { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 60vh !important; background: var(--fpa-frame) !important; padding: 30px !important; }
.fpa-state-card { max-width: 480px !important; width: 100% !important; background: var(--fpa-paper) !important; border-radius: var(--fpa-radius) !important; padding: 34px !important; text-align: center !important; }
.fpa-state-mark { height: 32px !important; margin: 0 auto 18px !important; display: block !important; }
.fpa-state-card h1 { font-size: 20px !important; margin: 0 0 10px !important; }
.fpa-state-card p { font-size: 14.5px !important; color: var(--fpa-ink-soft) !important; line-height: 1.55 !important; margin: 0 0 20px !important; }
.fpa-state-card .fpa-row-actions { justify-content: center !important; }

.fpa-skeleton-wrap { display: flex !important; gap: 20px !important; align-items: flex-start !important; padding: 6px 0 !important; }
.fpa-skeleton-lines { flex: 1 !important; }
.fpa-skel-bar { height: 12px !important; border-radius: 6px !important; background: linear-gradient(90deg, var(--fpa-line) 25%, var(--fpa-cream) 50%, var(--fpa-line) 75%) !important; background-size: 200% 100% !important; animation: fpa-shimmer 1.4s linear infinite !important; margin-bottom: 10px !important; }
@keyframes fpa-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.fpa-skel-spin { flex-shrink: 0 !important; text-align: center !important; font-size: 12.5px !important; color: var(--fpa-muted) !important; }
.fpa-skel-spin .fpa-spinner { display: block !important; margin: 0 auto 6px !important; }
.fpa-skel-tiles { display: flex !important; gap: 8px !important; margin-top: 12px !important; }
.fpa-skel-tile { width: 44px !important; height: 44px !important; border-radius: 8px !important; background: linear-gradient(90deg, var(--fpa-line) 25%, var(--fpa-cream) 50%, var(--fpa-line) 75%) !important; background-size: 200% 100% !important; animation: fpa-shimmer 1.4s linear infinite !important; }

/* =====================================================================
 * PRINT
 * ===================================================================== */

@media print {
    body * {
        visibility: hidden !important;
    }

    .fpa-certificate, .fpa-certificate * {
        visibility: visible !important;
    }

    .fpa-printable, .fpa-printable * {
        visibility: visible !important;
    }

    .fpa-printable {
        /* FIX: certificate print preserves background colours
           (print-color-adjust) — the report never had this, so its
           panels/bars could print as plain white/no-colour depending on
           the browser's print defaults. Same treatment now. */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .fpa-noprint {
        display: none !important;
    }

    .fpa-certificate {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        background: var(--fpa-frame) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .fpa-cert-sheet {
        border-radius: 0 !important;
        min-height: 96vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

.fpa-app.fpa-single .fpa-arrival {
    max-width: 100% !important;
    margin: unset !important;
}

/* =====================================================================
 * RESPONSIVE / MOBILE
 * Exact breakpoint set as given. Hamburger + drawer sidebar apply from
 * 1023px down through 420px. 1024-1280px stays desktop-like (sidebar
 * inline, no hamburger).
 * ===================================================================== */

@media (min-width: 1024px) and (max-width: 1280px) {
}

@media (max-width: 1023px) and (min-width: 768px) {
    .fpa-sheet {
        grid-template-columns: 1fr !important;
    }

    .fpa-side {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 50% !important;
        max-width: 480px !important;
        z-index: 1001 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        border-right: none !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
        overflow-y: auto !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-side {
        display: flex !important;
        transform: translateX(0) !important;
    }

    .fpa-rail-backdrop {
        display: none;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(7,17,15,0.55) !important;
        z-index: 1000 !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-rail-backdrop {
        display: block !important;
    }

    .fpa-rail-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1px solid var(--fpa-line) !important;
        background: var(--fpa-paper) !important;
        color: var(--fpa-ink) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
    }

    .fpa-rail-close:hover {
        background: var(--fpa-teal) !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }

    .fpa-rail-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--fpa-paper) !important;
        border: 1px solid var(--fpa-line) !important;
        color: var(--fpa-ink) !important;
        font-size: 17px !important;
        box-shadow: none !important;
        min-height: 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 14px 14px 0 !important;
        cursor: pointer !important;
    }

    .fpa-railfoot {
        margin-top: unset !important;
    }

    .fpa-node {
        padding: 8px 0px !important;
    }

    .fpa-app {
        padding: 12px !important;
    }

    .fpa-main {
        padding: 20px !important;
    }

    .fpa-exam-grid {
        grid-template-columns: 1fr !important;
    }

    .fpa-p-grid2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 767px) {

    .fpa-sheet {
        grid-template-columns: 1fr !important;
        border-radius: 0px !important;
    }

    .fpa-side {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 95% !important;
        max-width: 420px !important;
        z-index: 1001 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        border-right: none !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
        overflow-y: auto !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-side {
        display: flex !important;
        transform: translateX(0) !important;
    }

    .fpa-rail-backdrop {
        display: none;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(7,17,15,0.55) !important;
        z-index: 1000 !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-rail-backdrop {
        display: block !important;
    }

    .fpa-rail-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1px solid var(--fpa-line) !important;
        background: var(--fpa-paper) !important;
        color: var(--fpa-ink) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
    }

    .fpa-rail-close:hover {
        background: var(--fpa-teal) !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }

    .fpa-rail-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--fpa-paper) !important;
        border: 1px solid var(--fpa-line) !important;
        color: var(--fpa-ink) !important;
        font-size: 17px !important;
        box-shadow: none !important;
        min-height: 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 14px 14px 0 !important;
        cursor: pointer !important;
    }

    .fpa-railfoot {
        margin-top: unset !important;
    }

    .fpa-node {
        padding: 8px 0px !important;
    }

    .fpa-app {
        padding: 0px !important;
    }

    .fpa-main {
        padding: 20px !important;
    }

    .fpa-btn {
        /* width: 100% !important; */
        /* text-align: center !important; */
    }

    .fpa-session-row button {
        /* width: 48% !important; */
    }

    .fpa-exam-grid {
        grid-template-columns: 1fr !important;
    }

    .fpa-p-grid2 {
        grid-template-columns: 1fr !important;
    }
    .fpa-single .fpa-main {
        padding: 26px 20px 36px !important;
    }
    .fpa-card.fpa-linerow a.fpa-btn {
        width: unset !important;
    }
    .fpa-arrival {
        max-width: 100% !important;
        margin: unset !important;
    }
}

@media (max-width: 580px) {
	.fpa-lesson-complete-actions {
		display: flex;
		flex-wrap: wrap !important;
	}
	.fpa-lesson-complete-actions a {
		width: 100%;
	}
    .fpa-sheet {
        grid-template-columns: 1fr !important;
        border-radius: 0px !important;
    }
    span.fpa-btn.fpa-sm.fpa-ghost,
    a.fpa-btn.fpa-sm.fpa-ghost{
        width: unset !important;
    }
    .fpa-card.fpa-linerow a.fpa-btn {
        width: unset !important;
    }
    .fpa-side {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 95% !important;
        max-width: 420px !important;
        z-index: 1001 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        border-right: none !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
        overflow-y: auto !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-side {
        display: flex !important;
        transform: translateX(0) !important;
    }

    .fpa-rail-backdrop {
        display: none;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(7,17,15,0.55) !important;
        z-index: 1000 !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-rail-backdrop {
        display: block !important;
    }

    .fpa-rail-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1px solid var(--fpa-line) !important;
        background: var(--fpa-paper) !important;
        color: var(--fpa-ink) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
    }

    .fpa-rail-close:hover {
        background: var(--fpa-teal) !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }

    .fpa-rail-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--fpa-paper) !important;
        border: 1px solid var(--fpa-line) !important;
        color: var(--fpa-ink) !important;
        font-size: 17px !important;
        box-shadow: none !important;
        min-height: 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 14px 14px 0 !important;
        cursor: pointer !important;
    }

    .fpa-railfoot {
        margin-top: unset !important;
    }

    .fpa-node {
        padding: 8px 0px !important;
    }

    .fpa-app {
        padding: 0px !important;
    }

    .fpa-main {
        padding: 20px !important;
    }

    .fpa-btn {
        /* width: 100% !important; */
        text-align: center !important;
    }
    .fpa-exam-footrow span.fpa-btn {
        width: 100%;
    }
    .fpa-session-row button {
        /* width: 48% !important; */
    }

    .fpa-exam-grid {
        grid-template-columns: 1fr !important;
    }

    .fpa-p-grid2 {
        grid-template-columns: 1fr !important;
    }
    .fpa-metrics-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .fpa-single .fpa-main {
        padding: 26px 20px 36px !important;
    }
    .fpa-linerow {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .fpa-sheet[data-context="module_test"] .fpa-metrics-3,
    .fpa-sheet[data-context="domain_exam"] .fpa-metrics-3,
    .fpa-sheet[data-context="final_exam"] .fpa-metrics-3{
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fpa-exam-headright {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: stretch;
        text-align: left !important;
    }
    .fpa-exam-timer-wrap {
        text-align: left !important;
    }
    .fpa-exam-head {
        display: flex;
        flex-direction: column;
    }
    .fpa-exam-footrow {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 4px !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .fpa-exam-qgrid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 0 !important;
        flex-direction: row;
    }
    .fpa-certificate {
        padding: 0px !important;
    }
    .fpa-cert-sheet {
        padding: 30px !important;
    }
    .fpa-cert-actions.fpa-noprint {
        display: flex;
        flex-direction: column;
    }
    .fpa-domainrow ,
    .fpa-domainrow-gm {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
    }
    span.fpa-domainname-gm ,
    span.fpa-domainname{
        width: 100% !important;
    }
    .fpa-bar {
        max-width: 75%;
    }
    span.fpa-pct, span.fpa-pct-gm {
        width: 20% !important;
        text-align: right !important;
    }
    .fpa-arrival {
        max-width: 100% !important;
        margin: unset !important;
    }
}

@media (max-width: 420px) {
    .fpa-linerow {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .fpa-card.fpa-linerow a.fpa-btn {
        width: unset !important;
    }
    .fpa-single .fpa-main {
        padding: 26px 20px 36px !important;
    }
    .fpa-sheet {
        grid-template-columns: 1fr !important;
        border-radius: 0px !important;
    }

    .fpa-side {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 95% !important;
        max-width: 420px !important;
        z-index: 1001 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        border-right: none !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;
        overflow-y: auto !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-side {
        display: flex !important;
        transform: translateX(0) !important;
    }

    .fpa-rail-backdrop {
        display: none;
        position: absolute !important;
        inset: 0 !important;
        background: rgba(7,17,15,0.55) !important;
        z-index: 1000 !important;
    }

    .fpa-sheet.fpa-rail-open .fpa-rail-backdrop {
        display: block !important;
    }

    .fpa-rail-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        border: 1px solid var(--fpa-line) !important;
        background: var(--fpa-paper) !important;
        color: var(--fpa-ink) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: background 0.15s ease, transform 0.15s ease !important;
    }

    .fpa-rail-close:hover {
        background: var(--fpa-teal) !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }

    .fpa-rail-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        background: var(--fpa-paper) !important;
        border: 1px solid var(--fpa-line) !important;
        color: var(--fpa-ink) !important;
        font-size: 17px !important;
        box-shadow: none !important;
        min-height: 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 14px 14px 0 !important;
        cursor: pointer !important;
    }

    .fpa-railfoot {
        margin-top: unset !important;
    }

    .fpa-node {
        padding: 8px 0px !important;
    }

    .fpa-app {
        padding: 0px !important;
    }

    .fpa-main {
        padding: 20px !important;
    }

    .fpa-btn {
        width: 100% !important;
        text-align: center !important;
    }
    .fpa-exam-footrow span.fpa-btn {
        width: 100%;
    }
    .fpa-session-row button {
        width: 48% !important;
    }
    span.fpa-btn.fpa-sm.fpa-ghost,
    a.fpa-btn.fpa-sm.fpa-ghost{
        width: unset !important;
    }
    .fpa-exam-grid {
        grid-template-columns: 1fr !important;
    }

    .fpa-p-grid2 {
        grid-template-columns: 1fr !important;
    }	
    .fpa-metrics-3 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .fpa-sheet[data-context="module_test"] .fpa-metrics-3,
    .fpa-sheet[data-context="domain_exam"] .fpa-metrics-3,
    .fpa-sheet[data-context="final_exam"] .fpa-metrics-3{
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .fpa-exam-headright {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        justify-items: start;
        text-align: left !important;
    }
    .fpa-exam-head {
        display: flex;
        flex-direction: column;
    }
    .fpa-exam-footrow {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 4px !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .fpa-exam-qgrid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 0 !important;
        flex-direction: row;
    }
    .fpa-certificate {
        padding: 0px !important;
    }
    .fpa-cert-sheet {
        padding: 30px !important;
    }
    .fpa-domainrow ,
    .fpa-domainrow-gm {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        flex-direction: row;
        flex-wrap: wrap;
    }

}



.fpa-hub-section { margin: 20px 0; }
.fpa-hub-heading { font-weight: 600; font-size: 14.5px; color: var(--fpa-ink-soft); margin: 0 0 10px; }

p.fpa-ainote {
    margin-top: 10px !important;
}