/* Approved light FUTPEPI app design. Preserve the original green logo. */
:root {
  --fp-canvas: #fff; --fp-surface: #fff; --fp-soft: #f5f6f3;
  --fp-ink: #242821; --fp-muted: #646c61; --fp-line: #e8ebe5; --fp-outline: #d4dad0;
  --fp-yellow: #ffc210; --fp-yellow-hover: #eeb400; --fp-yellow-tint: #fff4cb;
  --fp-link: #242821; --fp-black: #000; --fp-danger: #b42318; --fp-success: #18734c;
  --fp-platform-ps: #1764c0; --fp-platform-xb: #16833b; --fp-platform-pc: #c76712;
  --fp-font: "Manrope", "Segoe UI", sans-serif;
}
.fp-icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.futpepi-masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1100px; margin: 0 auto; min-height: 92px; padding: 22px 26px; background: var(--fp-surface); }
.futpepi-brand-link { display: block; width: 200px; max-width: calc(100% - 68px); height: 48px; overflow: hidden; border-radius: 9px; background: var(--fp-black); color: #fff; }
.futpepi-brand-link img { display: block; width: 100%; height: 48px; object-fit: cover; color: #fff; font: 700 16px var(--fp-font); }
.futpepi-account-link { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; color: var(--fp-muted); background: var(--fp-soft); }
.futpepi-account-link:hover { color: var(--fp-ink); background: var(--fp-line); }
.futpepi-account-link[aria-current="page"] { background: var(--fp-yellow); color: var(--fp-ink); }
.member-help-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--fp-muted); font: 600 12px/1.5 var(--fp-font); text-decoration: underline; text-underline-offset: 4px; }
.member-help-link:hover { color: var(--fp-ink); }
.member-help-link .fp-icon { width: 17px; height: 17px; }
.futpepi-masthead a:focus-visible { outline: 3px solid var(--fp-ink); outline-offset: 4px; }
body.member-page .swal2-popup, body.settings-page .swal2-popup { font-family: var(--fp-font); color: var(--fp-ink); }
body.member-page .swal2-styled.swal2-confirm { background-color: var(--fp-yellow) !important; color: var(--fp-ink); }
@media (max-width: 759px) { .futpepi-masthead { min-height: 86px; padding: 18px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left)); } }
@media (max-width: 360px) { .futpepi-masthead { padding-left: 20px; padding-right: 20px; } }

.fp-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Shared legacy widgets also follow the member theme, including focus and hover. */
body.member-page #loader-1::before, body.settings-page #loader-1::before { border-top-color: var(--fp-yellow); }
body.member-page .container a:hover, body.settings-page .container a:hover { color: var(--fp-ink); }
body.member-page .swal2-styled.swal2-cancel, body.settings-page .swal2-styled.swal2-cancel { background: var(--fp-soft) !important; color: var(--fp-ink); }
body.member-page .swal2-styled.swal2-confirm.fp-confirm-danger { background-color: var(--fp-danger) !important; color: #fff; }
body.member-page .swal2-icon.swal2-warning, body.settings-page .swal2-icon.swal2-warning { color: var(--fp-yellow-hover); border-color: var(--fp-yellow); }
body.member-page .swal2-icon.swal2-info { color: var(--fp-muted); border-color: var(--fp-outline); }

/* Platform identity is an accent on the selected icon, shared by all member tools. */
.settings-choice input[name="platform"][value="ps"] + span,
.member-page input[name="console"] ~ #psSelectedButton { --fp-platform-color: var(--fp-platform-ps); }
.settings-choice input[name="platform"][value="xb"] + span,
.member-page input[name="console"] ~ #xbSelectedButton { --fp-platform-color: var(--fp-platform-xb); }
.settings-choice input[name="platform"][value="pc"] + span,
.member-page input[name="console"] ~ #pcSelectedButton { --fp-platform-color: var(--fp-platform-pc); }
.settings-choice input[name="platform"] + span > :is(i, .svg-inline--fa),
.member-page input[name="console"] ~ :is(#psSelectedButton, #xbSelectedButton, #pcSelectedButton) > :is(i, .svg-inline--fa) { display: inline-block; font-size: 16px; }
.settings-choice input[name="platform"] + span > .fp-icon { width: 17px; height: 17px; }
.settings-choice input[name="platform"] + span > :is(i, svg),
.member-page input[name="console"] ~ :is(#psSelectedButton, #xbSelectedButton, #pcSelectedButton) > :is(i, .svg-inline--fa) {
  transform-origin: center; transition: color .18s ease;
}
.settings-choice input[name="platform"]:checked + span > :is(i, svg),
.member-page input[name="console"]:checked ~ :is(#psSelectedButton, #xbSelectedButton, #pcSelectedButton) > :is(i, .svg-inline--fa) {
  color: var(--fp-platform-color); animation: fp-platform-select .28s ease-out;
}
@keyframes fp-platform-select {
  0% { transform: scale(.9); }
  50% { transform: translateY(-1px) scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .settings-choice input[name="platform"] + span > :is(i, svg),
  .member-page input[name="console"] ~ :is(#psSelectedButton, #xbSelectedButton, #pcSelectedButton) > :is(i, .svg-inline--fa) {
    animation: none !important; transition: none !important;
  }
}