/* 머슬팩토리 표현 어댑터 (ADR 0094 5단계).
   공용 셸(web/ 빌드 결과)의 크롬(상단 내비·로그인·404)과 1차 도달 보라
   포인트를 muscle 값으로 맞춘다.
   모든 선택자는 [data-mf-root][data-mf-theme="muscle"] 로 시작한다.
   스코프 없는 전역 선택자(:root·body 단독)·타 브랜드 토큰 금지.
   body가 들어가도 속성 한정(body[data-...])만 쓴다(공용 body 한정 규칙 대응).

   값 출처(받은 값만, 지어내지 않는다):
   - var(--mf-black) #050706, var(--mf-neon) #2BE39A — 받은 CI(ADR 0092).
     토큰 정의는 design-systems/musclefactory/tokens/colors.css 원본을 빌드가
     dist에 바이트 그대로 복사한다. 여기서 재정의하지 않는다.
   - #FFFFFF — 받은 비율(블랙 70 : 실버·화이트 20 : 그린 10)의 화이트를
     ADR 0093 결정 6이 본문 글자로 정한 값. 검정 면 위 글자·주요 버튼에만 쓴다.
   - --mf-print-green은 인쇄물 전용이라 화면에 쓰지 않는다.
   - 메탈 실버는 값을 받지 않아 쓰지 않는다. 서체는 시스템 서체만 쓴다.
   - 네온은 강조(활성 탭·배지 테두리·포커스)에만 쓴다. 버튼 채움에는 쓰지 않는다.
   - transparent는 보라 틴트 제거(바탕 걷어내기)에만 쓴다. 색이 아니다.

   라이트/다크 분기:
   - 공용 다크 전환은 FormulaTheme이 <html data-formula-theme="dark">로 한다
     (web/js/formula-theme.js: 밝으면 속성을 뗀다). 이 어댑터는 기본 규칙을
     밝은 면 값으로 두고, 어두운 면은 같은 선택자에
     [data-formula-theme="dark"]를 더한 규칙으로 덮는다(명시도가 높아 순서와
     무관하게 다크에서 이긴다).
   - 밝은 면(흰 카드 #ffffff): 글자·외곽선 var(--mf-black)(대비 20.20),
     채움 var(--mf-black)+#FFFFFF(대비 20.20).
   - 어두운 면(다크 카드 #0f1524·모바일 다크 #334155): 글자·외곽선 #FFFFFF
     (18.21·10.35) 또는 var(--mf-neon)(10.89·6.19). 검정(#050706)은 다크
     카드에서 1.11이라 글자·외곽선에 쓰지 않는다.
   - 검정 채움+흰 글자 항목(주 버튼·하단 활성 탭·지식 플로팅·뱃지·칩)은
     다크 면에서 채움 경계가 안 보이므로 네온 외곽선을 더한다. 글자 대비는
     채움 기준이라 면과 무관하게 20.20이다.
   - 상단 내비·로그인은 어느 모드에서도 검정 면이라 항상 흰 글자·네온 강조다.

   보라 포인트 처리(공용 정의: web/css/style.css --primary·--primary-fill,
   web/css/theme-milestone.css의 보라 재정의·글로우·!important, 아래 목록):
   - 채움(주 버튼·모바일 하단 활성 탭·지식 플로팅·리드 뱃지·팔로우 칩·
     플레이스 칩·단순 급여 주 버튼): 검정 바탕 + 흰 글자(다크는 네온 외곽선).
   - 밝은 면 글자·외곽선(「+ 지점 추가」·더보기 활성·고객 서브탭·고객 링크·
     전환율 수치·PT 강조·PT 필터 포커스·단순 급여 활성 칩·플레이스 날짜):
     검정. 어두운 면은 #FFFFFF 또는 네온.
   - 수익률·활동 그리드 포커스(theme-milestone :122, 공용 !important):
     같은 자리에 !important로 덮는다(예외는 테스트에 명시).
     그 밖의 !important는 쓰지 않는다.
   - 트레이너 성과·급여 셀프 강조 변수(--fx-tp-accent·--fx-tp-p-accent-light·
     --fx-self-accent): 밝은 면 검정, 어두운 면 네온. 틴트 변수
     (--fx-self-accent-soft)와 PT 합계 틴트는 transparent로 걷는다.
   - 검정 면(상단 내비)의 브랜드 역할 뱃지: 네온 글자 + 투명 바탕.
   - 상태색(빨강·초록 등 뜻색)과 차트 계열 색은 공용 그대로 둔다.
     전환율 카드의 금액·취소·보류 변형(.fx-cd-rate-card--*)은 뜻색이라
     :not으로 빼고 기본 카드 값만 덮는다.

   키보드 포커스:
   - 밝은 면은 검정 외곽선(네온은 흰 면에서 1.67이라 못 쓴다).
   - 어두운 면(검정 내비·로그인, 다크 모드 전체)은 네온 외곽선.
   - 공용의 모듈별 :focus-visible 보라 외곽선(플레이스·단순 급여 등)은 이
     전역 규칙이 명시도로 이겨 따로 두지 않는다.

   일부러 손대지 않은 것(값이 없어 보고만 한다):
   - 표·카드·입력의 밝은 면과 그 위 글자: 연회색·은색 값이 없어 공용 그대로 둔다.
     면(bg)과 글자(color)를 둘 다 모르면 하나만 덮으면 읽히지 않기 때문이다.
   - 역할 뱃지(.role-super 등)의 뜻색: 의미가 있어 바탕·글자는 두고
     테두리만 네온으로 더한다. 검정 내비의 .role-brand만 네온 글자로 둔다.
   - 프리미엄 탭(.nav-tab--premium): 공용 장식을 둔다.
   - 차트·인라인: 지출 막대(dashboard-app.js:12116), 전환 추이선
     (formula-customers.js:2442)은 차트라 둔다.
   - 주간 토글 인라인(dashboard-app.js:16440-16442): 활성·비활성을 인라인
     style로 구분해 CSS만으로 구분 덮개가 안 되므로 둔다(보고).
   - 숨김 탭 전용(crm-points·member-ltv·세그먼트 보드·design_ai) 선택자는
     두지 않는다. 전역 주 버튼·포커스 규칙이 닿는 것은 둔다.
   - 공용 전역 입력 포커스(style.css .form-group :819, theme-milestone :99
     다크 input:focus)는 이번 지정 목록 밖이라 둔다(후속 후보). */

/* 공용 라이트/다크 확인 결과(보고용, web/ 읽기만):
   - Formula 모드 전환: web/js/formula-theme.js. localStorage fx_formula_theme
     (light·dark·system, 기본 light)을 보고 어두우면 <html>에
     data-formula-theme="dark"를 달고, 밝으면 속성을 뗀다. 전환 UI는 설정 화면의
     선택 목록이다(web/js/auth.js가 FormulaTheme.setPreference에 연결).
     body[data-app-mode="formula"]일 때만 돈다.
   - 전용 호스트 축: 공용 부트스트랩(apps/shared/dedicated-core/runtime/
     bootstrap.js applyBodyScope)이 설정의 rootAttr·themeAttr 이름으로
     <body>에 표시를 달고, 값은 localStorage dedicated_theme
     (없으면 설정 defaultTheme)이다. 값을 바꾸는 공용 UI는 없어 기본값에 머문다.
   - 이 어댑터는 두 축과 충돌하지 않는다. 하위 테마 선택(data-mf-theme)은
     빌드가 <html>에 찍고, 다크 분기는 공용 <html data-formula-theme>을 본다. */

/* ── 상단 내비(어느 모드에서도 검정 면) ── */
[data-mf-root][data-mf-theme="muscle"] .main-nav {
  background-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .nav-logo img.dedicated-brand-logo {
  display: block;
  height: 28px;
  width: auto;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .nav-tab {
  background-color: transparent;
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .nav-tab:hover {
  background-color: transparent;
  color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .nav-tab.active {
  background-color: transparent;
  color: var(--mf-neon);
  box-shadow: inset 0 -2px 0 var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"] .main-nav #nav-brand-name,
[data-mf-root][data-mf-theme="muscle"] .main-nav #nav-user-name {
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .role-badge {
  border: 1px solid var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .btn-outline {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .btn-outline:hover {
  background-color: transparent;
  color: var(--mf-neon);
  border-color: var(--mf-neon);
}

/* ── 공용 보라 포인트: 밝은 면 기본(검정 글자·외곽선, 검정 채움+흰 글자) ── */
[data-mf-root][data-mf-theme="muscle"] #btn-add-branch {
  color: var(--mf-black);
  border-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] #btn-add-branch:hover {
  background-color: transparent;
  color: var(--mf-black);
  border-color: var(--mf-black);
}

/* 내비 안 「+」는 검정 면이라 항상 흰색이다(밝은 면 기본보다 명시도가 높다). */
[data-mf-root][data-mf-theme="muscle"] .main-nav #btn-add-branch {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav #btn-add-branch:hover {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .mobile-nav-tab.active,
[data-mf-root][data-mf-theme="muscle"] .mobile-more-tab.active {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .mobile-more-toggle.has-active-child {
  color: var(--mf-black);
  border-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .knowledge-dashboard-floating-btn.btn-primary {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"] .knowledge-dashboard-floating-btn.btn-primary:hover {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav .role-brand {
  background-color: transparent;
  color: var(--mf-neon);
}

/* 앱 안쪽 주 버튼(공용 style.css .btn-primary + theme-milestone 글로우). */
[data-mf-root][data-mf-theme="muscle"] .btn-primary {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-black);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"] .btn-primary:hover {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"] .btn-primary:focus-visible,
[data-mf-root][data-mf-theme="muscle"] .btn-primary:active {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
  box-shadow: none;
}

/* 고객 탭(style.css 18392·18480·18643·18741). 뜻색 변형은 :not으로 뺀다. */
[data-mf-root][data-mf-theme="muscle"] .fx-customer-subtab.active {
  color: var(--mf-black);
  border-bottom-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-customer-link {
  color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-customer-tel:hover {
  color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-cd-rate-card:not(.fx-cd-rate-card--money):not(.fx-cd-rate-card--cancel):not(.fx-cd-rate-card--pay-hold):not(.fx-cd-rate-card--pay-hold-rate) .fx-cd-rate-value {
  color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-contact-follow-chip.is-active {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-black);
  color: #FFFFFF;
}

/* PT 탭(style.css 16530-16532·16570). 합계 틴트는 다크에서만 걷는다
   (라이트 베이지 #faf4ee는 보라가 아니라 둔다). */
[data-mf-root][data-mf-theme="muscle"] .fx-pt-recent-filters .fx-pt-recent-fname:focus,
[data-mf-root][data-mf-theme="muscle"] .fx-pt-recent-filters .fx-pt-recent-fsel:focus {
  border-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-pt-strong {
  color: var(--mf-black);
}

/* 리드 뱃지(style.css 21085-21086). */
[data-mf-root][data-mf-theme="muscle"] .fx-lead-badge-pt,
[data-mf-root][data-mf-theme="muscle"] .fx-lead-badge-pt_conv {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-black);
  color: #FFFFFF;
}

/* 수익률·활동 그리드 포커스(theme-milestone.css:122). 공용이 !important라
   같은 자리에 !important로 덮는다(유일한 예외, 테스트에 명시). */
[data-mf-root][data-mf-theme="muscle"] .profit-input:focus,
[data-mf-root][data-mf-theme="muscle"] .activity-input:focus {
  border-color: var(--mf-black) !important;
}

/* 트레이너 성과 강조(formula-trainer-performance.css:134-135).
   뜻색(--fx-tp-p-good·warn·bad·...-text)은 둔다. */
[data-mf-root][data-mf-theme="muscle"] .fx-trainer-performance,
[data-mf-root][data-mf-theme="muscle"] .fx-tp-p-modal {
  --fx-tp-accent: var(--mf-black);
  --fx-tp-p-accent-light: var(--mf-black);
}

/* 플레이스(place-rank.css: 활성 칩·날짜 버튼. 차트·스와치는 둔다). */
[data-mf-root][data-mf-theme="muscle"] .fx-place-rank-chip.is-active {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .fx-place-rank-day:hover {
  border-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] .fx-place-rank-day.is-selected {
  outline-color: var(--mf-black);
}

/* 단순 급여(payroll-simple.css: 주 버튼·활성 칩). */
[data-mf-root][data-mf-theme="muscle"] .fx-payroll-simple-button.is-primary,
[data-mf-root][data-mf-theme="muscle"] .fx-payroll-self-button.is-primary {
  background-color: var(--mf-black);
  border-color: var(--mf-black);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .fx-payroll-simple-chip.is-active {
  border-color: var(--mf-black);
}

/* 급여 셀프 강조(formula-payroll-admin.css --fx-self-accent).
   공용이 body 한정이라 body[data-app-mode] 한정으로 맞춘다. */
[data-mf-root][data-mf-theme="muscle"] body[data-app-mode="formula"] [data-fx-feature="trainer_payroll"] {
  --fx-self-accent: var(--mf-black);
  --fx-self-accent-soft: transparent;
}

/* ── 어두운 면(html[data-formula-theme="dark"]): 흰 글자·네온 강조 ── */
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] #btn-add-branch {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] #btn-add-branch:hover {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .mobile-nav-tab.active,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .mobile-more-tab.active {
  background-color: var(--mf-black);
  border-color: var(--mf-neon);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .mobile-more-toggle.has-active-child {
  color: var(--mf-neon);
  border-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .knowledge-dashboard-floating-btn.btn-primary,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .knowledge-dashboard-floating-btn.btn-primary:hover {
  border-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .btn-primary {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-neon);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .btn-primary:hover,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .btn-primary:focus-visible,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .btn-primary:active {
  background-color: var(--mf-black);
  border-color: var(--mf-neon);
  color: #FFFFFF;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-customer-subtab.active {
  color: var(--mf-neon);
  border-bottom-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-customer-link {
  color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-customer-tel:hover {
  color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-cd-rate-card:not(.fx-cd-rate-card--money):not(.fx-cd-rate-card--cancel):not(.fx-cd-rate-card--pay-hold):not(.fx-cd-rate-card--pay-hold-rate) .fx-cd-rate-value {
  color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-contact-follow-chip.is-active {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-neon);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-pt-recent-filters .fx-pt-recent-fname:focus,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-pt-recent-filters .fx-pt-recent-fsel:focus {
  border-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-pt-strong {
  color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-pt-recent-sum {
  background-color: transparent;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-lead-badge-pt,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-lead-badge-pt_conv {
  background-color: var(--mf-black);
  border: 1px solid var(--mf-neon);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .profit-input:focus,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .activity-input:focus {
  border-color: var(--mf-neon) !important;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-trainer-performance,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-tp-p-modal {
  --fx-tp-accent: var(--mf-neon);
  --fx-tp-p-accent-light: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-place-rank-chip.is-active {
  background-color: var(--mf-black);
  border-color: var(--mf-neon);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-place-rank-day:hover {
  border-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-place-rank-day.is-selected {
  outline-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-payroll-simple-button.is-primary,
[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-payroll-self-button.is-primary {
  background-color: var(--mf-black);
  border-color: var(--mf-neon);
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] .fx-payroll-simple-chip.is-active {
  border-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] body[data-app-mode="formula"] [data-fx-feature="trainer_payroll"] {
  --fx-self-accent: var(--mf-neon);
  --fx-self-accent-soft: transparent;
}

/* ── 로그인(진입 전, 어느 모드에서도 검정 면) ── */
[data-mf-root][data-mf-theme="muscle"] #page-login {
  background-color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] #page-login .auth-card {
  background-color: transparent;
  box-shadow: none;
}

[data-mf-root][data-mf-theme="muscle"] #page-login .auth-logo h1 {
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] #page-login .auth-logo p {
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] #page-login .mf-auth-logo {
  display: block;
  width: min(220px, 70vw);
  height: auto;
  margin: 0 auto 24px;
}

[data-mf-root][data-mf-theme="muscle"] #page-login .form-group label {
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] #page-login .btn-primary {
  background-color: #FFFFFF;
  color: var(--mf-black);
}

[data-mf-root][data-mf-theme="muscle"] #page-login .btn-primary:hover {
  background-color: #FFFFFF;
}

/* 키보드 포커스: 밝은 면은 검정, 어두운 면(검정 내비·로그인·다크 모드)은 네온. */
[data-mf-root][data-mf-theme="muscle"] :focus-visible {
  outline: 2px solid var(--mf-black);
  outline-offset: 2px;
}

[data-mf-root][data-mf-theme="muscle"] .main-nav :focus-visible,
[data-mf-root][data-mf-theme="muscle"] #page-login :focus-visible {
  outline-color: var(--mf-neon);
}

[data-mf-root][data-mf-theme="muscle"][data-formula-theme="dark"] :focus-visible {
  outline-color: var(--mf-neon);
}

/* ── 404(앱에 동봉, body.mf-standalone가 있는 문서에만 맞는다) ── */
[data-mf-root][data-mf-theme="muscle"] body.mf-standalone {
  margin: 0;
  min-height: 100vh;
  background-color: var(--mf-black);
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-mf-root][data-mf-theme="muscle"] .mf-hero {
  text-align: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 48px 16px;
}

[data-mf-root][data-mf-theme="muscle"] .mf-logo {
  display: block;
  width: min(220px, 70vw);
  max-width: 220px;
  height: auto;
  margin: 0 auto 24px;
}

[data-mf-root][data-mf-theme="muscle"] .mf-title {
  margin: 0 0 16px;
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF;
}

[data-mf-root][data-mf-theme="muscle"] .mf-badge {
  display: inline-block;
  margin: 0;
  padding: 6px 16px;
  border: 1px solid var(--mf-neon);
  border-radius: 999px;
  color: var(--mf-neon);
  font-size: 1rem;
  font-weight: 600;
}