/**
 * Kompakte Mobile-Portal-UI — aktiv bei body[data-ui-design="mobile"].sf-ui-mobile-active
 * Eltern- / Spieler- / Kind-Portal.
 *
 * Grundsätze:
 *  - Nichts „schwebt“ über dem Inhalt außer der Bottom-Nav (Inhalt hat passendes Padding).
 *  - Kopfzeile (Topbar) fließt mit dem Inhalt und scrollt weg.
 *  - Profilwechsel (nativ) ist kein schwebender Button mehr, sondern Kachel/Kopfzeile.
 */
body[data-ui-design="mobile"].sf-ui-mobile-active {
  --sf-m-ink: #0f1f1a;
  --sf-m-forest: #143d32;
  --sf-m-green: #1f8f5f;
  --sf-m-mint: #e8f6ef;
  --sf-m-sand: #eef3f0;
  --sf-m-line: rgba(20, 61, 50, 0.1);
  --sf-m-nav-h: 60px;
  --radius: 16px;
  background: var(--sf-m-sand) !important;
  background-image: none !important;
  color: var(--sf-m-ink);
}

/* Portal-Hintergründe (Plakat/Verlauf) abschalten */
body[data-ui-design="mobile"].sf-ui-mobile-active::before,
body[data-ui-design="mobile"].sf-ui-mobile-active::after {
  display: none !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .app-shell {
  background: transparent !important;
  min-height: 100dvh;
  display: block;
}

/* Desktop-Chrome weg */
/* Hamburger-Menü + Seitenleiste bleiben (dort liegt u. a. der Ansichts-Umschalter) */
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-context-pill,
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar .page-title,
body[data-ui-design="mobile"].sf-ui-mobile-active .content::before,
body[data-ui-design="mobile"].sf-ui-mobile-active .sf-native-club-switch {
  display: none !important;
}

/* Kopfzeile: im Fluss, kompakt, scrollt weg */
body[data-ui-design="mobile"].sf-ui-mobile-active .topbar {
  position: static !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 0 !important;
  margin: 0 auto;
  max-width: 560px;
  padding: calc(env(safe-area-inset-top, 0px) + 0.45rem) 0.85rem 0.15rem !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-left {
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  min-width: 0;
  gap: 0.5rem !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-brand-logo {
  width: 30px !important;
  height: 30px !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .topbar-actions .icon-button,
body[data-ui-design="mobile"].sf-ui-mobile-active .sf-lang-globe-btn {
  width: 2.1rem !important;
  height: 2.1rem !important;
  min-width: 2.1rem !important;
  background: #fff;
  border: 1px solid var(--sf-m-line);
  box-shadow: none;
}

.sf-m-head-title {
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--sf-m-ink, #0f1f1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-m-head-profile {
  appearance: none;
  border: 1px solid rgba(20, 61, 50, 0.12);
  background: #fff;
  color: var(--sf-m-forest, #143d32);
  border-radius: 999px;
  height: 2.1rem;
  width: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

/* Inhalt */
body[data-ui-design="mobile"].sf-ui-mobile-active .content {
  max-width: 560px !important;
  margin: 0 auto !important;
  width: 100%;
  padding: 0.35rem 0.85rem calc(var(--sf-m-nav-h) + env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active.sf-no-m-nav .content {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem) !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .content .page > .card,
body[data-ui-design="mobile"].sf-ui-mobile-active .content > .card,
body[data-ui-design="mobile"].sf-ui-mobile-active .content section.card {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body[data-ui-design="mobile"].sf-ui-mobile-active .content section.card > .card-header {
  display: none !important;
}

/* Hilfe-Panel unter die Topbar */
body[data-ui-design="mobile"].sf-ui-mobile-active .help-panel {
  top: calc(env(safe-area-inset-top, 0px) + 3.2rem) !important;
}

/* —— Bottom nav —— */
.sf-m-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  height: calc(var(--sf-m-nav-h, 60px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid rgba(20, 61, 50, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -6px 20px rgba(15, 31, 26, 0.06);
}

.sf-m-nav__btn {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(15, 31, 26, 0.5);
  cursor: pointer;
  text-decoration: none;
  padding: 0.3rem 0.2rem;
}

.sf-m-nav__btn.is-active {
  color: #1f8f5f;
}

.sf-m-nav__ico {
  font-size: 1.15rem;
  line-height: 1;
}

/* —— Home —— */
.sf-m-home {
  display: none;
  flex-direction: column;
  gap: 0.8rem;
}

body.sf-ui-mobile-active[data-sf-m-view="home"] .sf-m-home {
  display: flex;
}

/* View-Steuerung im Kind-/Eltern-Portal */
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-sf-m-view="home"] #sfClassicMobileSwitch,
body.sf-ui-mobile-active[data-sf-m-view="home"] #publicLightKidFeedback,
body.sf-ui-mobile-active #publicLightKidTabBar {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidSessionsPane {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidMessengerPane,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidFooter,
body.sf-ui-mobile-active[data-sf-m-view="sessions"] #publicLightKidPushBlock {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidMessengerPane {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="messenger"] #publicLightKidFooter {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="more"][data-sf-m-stats="1"] #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="more"][data-sf-m-push="1"] #publicLightKidPushBlock,
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidFooter {
  display: block !important;
}

body.sf-ui-mobile-active[data-sf-m-view="more"]:not([data-sf-m-stats="1"]) #publicLightKidStatsPane,
body.sf-ui-mobile-active[data-sf-m-view="more"]:not([data-sf-m-push="1"]) #publicLightKidPushBlock {
  display: none !important;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidSessionsPane,
body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidMessengerPane {
  display: none !important;
}

/* Hero + Kacheln */
.sf-m-hero {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  background: linear-gradient(160deg, #163f33 0%, #1d5a47 100%);
  color: #fff;
  border-radius: 20px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: 0 12px 28px rgba(15, 31, 26, 0.16);
  cursor: pointer;
}

.sf-m-hero__kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.sf-m-hero__when {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.sf-m-hero__place {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  opacity: 0.9;
  line-height: 1.35;
}

.sf-m-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.sf-m-hero__pills span {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.sf-m-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.sf-m-tile {
  appearance: none;
  font: inherit;
  border: 1px solid rgba(20, 61, 50, 0.08);
  background: #fff;
  border-radius: 16px;
  padding: 0.85rem 0.8rem;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.04);
  color: #0f1f1a;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 4.6rem;
}

.sf-m-tile__ico {
  font-size: 1.2rem;
  line-height: 1.1;
}

.sf-m-tile__label {
  font-weight: 800;
  font-size: 0.92rem;
}

.sf-m-tile__meta {
  font-size: 0.72rem;
  color: rgba(15, 31, 26, 0.55);
  font-weight: 600;
}

.sf-m-tile.is-wide {
  grid-column: 1 / -1;
}

/* —— Termine —— */
body.sf-ui-mobile-active #publicLightKidSessions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0 !important;
}

body.sf-ui-mobile-active .public-light-session-card {
  border-radius: 16px !important;
  border: 1px solid rgba(20, 61, 50, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(15, 31, 26, 0.05) !important;
  padding: 0.85rem 0.9rem !important;
}

body.sf-ui-mobile-active .public-light-session-card .cta,
body.sf-ui-mobile-active .attendance-rsvp-group-btn,
body.sf-ui-mobile-active .sf-session-carpool .cta,
body.sf-ui-mobile-active .sf-m-more__card .cta {
  border-radius: 999px !important;
}

body.sf-ui-mobile-active .sf-session-carpool,
body.sf-ui-mobile-active .sf-session-carpool--direct {
  border-radius: 14px !important;
  border: 1px solid rgba(20, 61, 50, 0.1) !important;
  background: #e8f6ef !important;
  padding: 0.65rem !important;
  margin-top: 0.6rem;
}

body.sf-ui-mobile-active .sf-session-carpool-offer {
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(20, 61, 50, 0.08) !important;
}

/* —— Mehr —— */
.sf-m-more {
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] .sf-m-more {
  display: flex;
}

.sf-m-more__card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.8rem 0.9rem;
  box-shadow: 0 6px 16px rgba(15, 31, 26, 0.04);
}

.sf-m-more__card h3 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 800;
}

.sf-m-more__row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.sf-m-more__row .cta {
  border-radius: 999px;
  text-decoration: none;
}

.sf-m-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  background: #eef3f0;
  border-radius: 999px;
  padding: 0.25rem;
  margin-top: 0.5rem;
}

.sf-m-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.5rem 0.4rem;
  border-radius: 999px;
  color: rgba(15, 31, 26, 0.6);
  cursor: pointer;
}

.sf-m-seg button.is-on {
  background: #fff;
  color: #1f8f5f;
  box-shadow: 0 2px 8px rgba(15, 31, 26, 0.1);
}

/* PIN / Gate / Consent / Boot */
body.sf-ui-mobile-active #publicLightKidGate,
body.sf-ui-mobile-active #publicLightKidConsent,
body.sf-ui-mobile-active #publicLightKidBoot {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.9rem 1rem;
  box-shadow: 0 8px 22px rgba(15, 31, 26, 0.05);
}

body.sf-ui-mobile-active #publicLightKidGate .cta,
body.sf-ui-mobile-active #publicLightKidConsent .cta,
body.sf-ui-mobile-active #publicLightKidFooter .cta {
  border-radius: 999px;
}

body.sf-ui-mobile-active #publicLightKidFooter {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.75rem;
  margin: 0.6rem 0 0 !important;
  flex-wrap: wrap;
  gap: 0.45rem;
}

body.sf-ui-mobile-active[data-sf-m-view="more"] #publicLightKidFooter {
  display: flex !important;
}

body.sf-ui-mobile-active #publicLightKidPushBlock {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.75rem 0.9rem;
  margin: 0.6rem 0 0 !important;
}

body.sf-ui-mobile-active .sf-kid-stats-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

body.sf-ui-mobile-active .sf-kid-stats-gauge {
  background: #e8f6ef;
  border-radius: 14px;
  padding: 0.65rem;
}

/* Fundbüro / Shop / Zugang / Teamplan */
body.sf-ui-mobile-active .facility-page .card-header,
body.sf-ui-mobile-active .facility-public-header {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: #fff !important;
  border-radius: 16px;
  padding: 0.8rem 0.9rem !important;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(20, 61, 50, 0.08);
}

body.sf-ui-mobile-active .facility-page .card-header::before,
body.sf-ui-mobile-active .facility-page .card-header::after {
  display: none !important;
}

body.sf-ui-mobile-active .facility-hub,
body.sf-ui-mobile-active .facility-panel {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  padding: 0.8rem;
}

body.sf-ui-mobile-active .sf-team-schedule {
  background: #fff !important;
  border-radius: 16px;
  border: 1px solid rgba(20, 61, 50, 0.08);
  overflow: hidden;
}

body.sf-ui-mobile-active #parentAccessRequestForm {
  background: #fff;
  border-radius: 16px;
  padding: 0.85rem;
}

body.sf-ui-mobile-active .cta:not(.ghost) {
  background: #1f8f5f;
  border-color: #1f8f5f;
}

body.sf-ui-mobile-active .input,
body.sf-ui-mobile-active .textarea,
body.sf-ui-mobile-active select.input,
body.sf-ui-mobile-active .page textarea,
body.sf-ui-mobile-active .page select,
body.sf-ui-mobile-active .page input[type="text"],
body.sf-ui-mobile-active .page input[type="email"],
body.sf-ui-mobile-active .page input[type="search"],
body.sf-ui-mobile-active .page input[type="number"],
body.sf-ui-mobile-active .page input[type="tel"],
body.sf-ui-mobile-active .page input[type="file"] {
  border-radius: 12px;
  font-size: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.sf-ui-mobile-active .page textarea {
  resize: vertical;
}

body.sf-ui-mobile-active .facility-hub {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.sf-ui-mobile-active .public-light-event-reg-inplace {
  background: #fff;
  border-radius: 16px;
  padding: 0.7rem;
  border: 1px solid rgba(20, 61, 50, 0.08);
}

/* Hinweis in Classic: neue Ansicht testen (im Fluss, nicht fixiert) */
.sf-m-try-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: #e8f6ef;
  border: 1px solid rgba(20, 61, 50, 0.12);
  border-radius: 14px;
  padding: 0.55rem 0.75rem;
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #143d32;
}

.sf-m-try-banner .cta {
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* Bottom-Nav erst nach PIN-/Einwilligungs-Maske */
body.sf-m-locked .sf-m-nav {
  display: none !important;
}

/* —— Ungelesen-Zähler (Messenger) —— */
.sf-m-nav__ico {
  position: relative;
  display: inline-block;
}

.sf-m-badge {
  position: absolute;
  top: -7px;
  right: -12px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #d93025;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
}

.sf-m-tile {
  position: relative;
}

.sf-m-tile .sf-m-badge {
  top: 0.6rem;
  right: 0.7rem;
  font-size: 0.7rem;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
}

/* —— Trainer-Shell (eingeloggte interne App, ≤ 960px) —— */
body[data-ui-design="mobile"].sf-ui-mobile-trainer {
  --sf-m-nav-h: 60px;
}

/* Nav liegt unter Seitenleiste/Backdrop, damit das Hamburger-Menü sie sauber überdeckt */
body.sf-ui-mobile-trainer.nav-open .sf-m-nav {
  z-index: 40;
}

body[data-ui-design="mobile"].sf-ui-mobile-trainer .content {
  padding-bottom: calc(var(--sf-m-nav-h) + env(safe-area-inset-bottom, 0px) + 1.25rem) !important;
}

/* Nichts schwebt über der Nav: Profilwechsel ist in „Mehr“ */
body[data-ui-design="mobile"].sf-ui-mobile-trainer .sf-native-club-switch,
body[data-ui-design="mobile"].sf-ui-mobile-trainer #sfNativeClubSwitch {
  display: none !important;
}

.sf-m-thome,
.sf-m-tmore {
  display: none;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0.2rem 0 0.8rem;
}

body.sf-ui-mobile-trainer.sf-m-t-home .sf-m-thome,
body.sf-ui-mobile-trainer.sf-m-t-more-open .sf-m-tmore {
  display: flex;
}

/* Trainer-Start: kompakte Kacheln statt Desktop-Dashboard (optional einblendbar) */
body.sf-ui-mobile-trainer.sf-m-t-home:not(.sf-m-t-showdash) main.page,
body.sf-ui-mobile-trainer.sf-m-t-more-open main.page {
  display: none !important;
}

.sf-m-thome .sf-m-hero {
  cursor: pointer;
}

.sf-m-link {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  color: #1f8f5f;
  padding: 0.4rem;
  cursor: pointer;
  align-self: center;
}

.sf-m-tmore {
  gap: 0.6rem;
}

.sf-m-list {
  display: flex;
  flex-direction: column;
}

.sf-m-list__row {
  appearance: none;
  border: 0;
  border-top: 1px solid rgba(20, 61, 50, 0.08);
  background: transparent;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.4rem 0.1rem;
  text-align: left;
  cursor: pointer;
}

.sf-m-list__row:first-child {
  border-top: 0;
}

.sf-m-list__ico {
  width: 1.6rem;
  text-align: center;
  font-size: 1.05rem;
  flex: 0 0 auto;
}

.sf-m-list__label {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.sf-m-list__chev {
  flex: 0 0 auto;
  opacity: 0.4;
  font-size: 1.2rem;
}

/* —— Dunkelmodus (Trainer-Shell & gemeinsame Bausteine) —— */
body[data-theme="dark"] .sf-m-nav {
  background: #17201d;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .sf-m-nav__btn {
  color: rgba(255, 255, 255, 0.55);
}

body[data-theme="dark"] .sf-m-nav__btn.is-active {
  color: #4cd9a0;
}

body[data-theme="dark"] .sf-m-tile,
body[data-theme="dark"] .sf-m-more__card {
  background: #1b2622;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
  box-shadow: none;
}

body[data-theme="dark"] .sf-m-tile__meta {
  color: rgba(232, 242, 238, 0.6);
}

body[data-theme="dark"] .sf-m-list__row {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: #e8f2ee;
}

body[data-theme="dark"] .sf-m-seg {
  background: #0f1714;
}

body[data-theme="dark"] .sf-m-seg button {
  color: rgba(232, 242, 238, 0.7);
}

body[data-theme="dark"] .sf-m-seg button.is-on {
  background: #26352f;
  color: #4cd9a0;
}

body[data-theme="dark"] .sf-m-link {
  color: #4cd9a0;
}