/* Delivery bundle generated from design-system.css.
   Do not edit directly: update design-system.css, then rebuild route bundles. */

@layer reset, tokens, base, layout, components, utilities, overrides;

@import "./utilities.css";

@layer components {
/* Detail footer CTA */
.fftri-detail-footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-index-shell-bottom-nav);
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg-surface);
}

.fftri-detail-footer__inner {
  padding: var(--space-4);
  display: flex;
  justify-content: center;
}

.fftri-detail-footer__inner > .fftri-button-inline--full {
  width: 80%;
  max-width: 80%;
}

/* Hero overlay */
.fftri-hero__overlay {
  background: linear-gradient(
    to top,
    var(--overlay-dark-60),
    var(--overlay-dark-20),
    transparent
  );
}

/* Discipline segments */
.fftri-segment--ski {
  background-color: color-mix(
    in srgb,
    var(--fftri-blue) 8%,
    var(--fftri-teal) 8%,
    transparent
  );
}

.fftri-segment--ski-border {
  border-color: color-mix(
    in srgb,
    var(--fftri-blue) 18%,
    var(--fftri-teal) 18%,
    transparent
  );
}

.fftri-segment__icon--ski {
  color: color-mix(in srgb, var(--fftri-blue) 55%, var(--fftri-teal) 45%);
}

/* bike + trail share the orange palette */
.fftri-segment--bike,
.fftri-segment--trail {
  background-color: var(
    --c-fftri-orange-subtle,
    color-mix(in srgb, var(--fftri-orange) 10%, transparent)
  );
}

.fftri-segment--bike-border,
.fftri-segment--trail-border {
  border-color: var(
    --c-fftri-orange-border,
    color-mix(in srgb, var(--fftri-orange) 20%, transparent)
  );
}

.fftri-segment__icon--bike,
.fftri-segment__icon--trail {
  color: var(--c-fftri-orange, var(--fftri-orange));
}

/* run + vtt share the teal palette */
.fftri-segment--run,
.fftri-segment--vtt {
  background-color: var(
    --c-fftri-teal-subtle,
    color-mix(in srgb, var(--fftri-teal) 10%, transparent)
  );
}

.fftri-segment--run-border,
.fftri-segment--vtt-border {
  border-color: var(
    --c-fftri-teal-border,
    color-mix(in srgb, var(--fftri-teal) 20%, transparent)
  );
}

.fftri-segment__icon--run,
.fftri-segment__icon--vtt {
  color: var(--c-fftri-teal, var(--fftri-teal));
}

/* canoe shares the swim (blue) palette */
.fftri-segment--swim,
.fftri-segment--canoe {
  background-color: var(
    --c-fftri-blue-subtle,
    color-mix(in srgb, var(--fftri-blue) 10%, transparent)
  );
}

.fftri-segment--swim-border,
.fftri-segment--canoe-border {
  border-color: var(
    --c-fftri-blue-border,
    color-mix(in srgb, var(--fftri-blue) 20%, transparent)
  );
}

.fftri-segment__icon--swim,
.fftri-segment__icon--canoe {
  color: var(--c-fftri-blue, var(--fftri-blue));
}


/* ============================================================
   Migrated During Sprint 2 consolidation
   ============================================================ */


.bg-fftri-blue {
  background-color: var(--fftri-blue);
}
.text-fftri-blue {
  color: var(--fftri-blue);
}
.bg-fftri-teal {
  background-color: var(--fftri-teal);
}
.text-fftri-teal {
  color: var(--fftri-teal);
}
.text-fftri-men {
  color: var(--color-gender-m);
}
.text-fftri-women {
  color: var(--color-gender-f);
}
.text-fftri-success {
  color: var(--color-accent-teal-600);
}
.bg-fftri-red {
  background-color: var(--fftri-red);
}
.text-fftri-red {
  color: var(--fftri-red);
}
.bg-fftri-orange {
  background-color: var(--fftri-orange);
}
.text-fftri-orange {
  color: var(--fftri-orange);
}

/* Masquer la scrollbar pour une apparence plus clean */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes fftri-view-slide-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fftri-view-transition {
  animation: fftri-view-slide-in var(--duration-normal) ease both;
}

.fftri-tricolor {
  background: linear-gradient(
    90deg,
    var(--fftri-blue) 0%,
    var(--fftri-blue) 30%,
    var(--fftri-teal) 100%
  );
  transform-origin: left;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
  opacity: 0.9;
  transform: scaleX(0.98);
}

.fftri-card-top {
  border-top: var(--space-0-75) solid var(--fftri-blue);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-card-top:hover {
  border-top-color: var(--fftri-teal);
}

.fftri-logo-ring {
  border: 2px solid var(--club-accent, var(--fftri-blue));
  background: var(--color-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--club-accent, var(--fftri-blue)) 14%, transparent);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-logo-ring--md {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.fftri-result-card {
  border-left: var(--space-1) solid var(
    --fftri-result-card-accent,
    var(--color-brand-600)
  );
  background: linear-gradient(
    90deg,
    var(--overlay-brand-blue-06) 0%,
    var(--overlay-brand-teal-05) 60%,
    var(--color-bg) 100%
  );
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-result-card:hover {
  border-left-color: var(--fftri-teal);
}

.fftri-result-card .fftri-card-title {
  color: var(--color-text-strong);
}

.fftri-result-card .fftri-card-location {
  color: var(--color-text-default);
}

[data-theme="dark"] .fftri-result-card .fftri-card-title {
  color: var(--color-dark-text-strong);
}

[data-theme="dark"] .fftri-result-card .fftri-card-location {
  color: var(--color-dark-text);
}

.results-bookmark-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  border-radius: var(--radius-pill);
  border: 1px solid
    color-mix(in srgb, var(--color-border-strong) 35%, transparent);
  background: var(--overlay-white-92);
  color: var(--color-contrast-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px var(--overlay-ink-08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, color var(--duration-fast) ease;
  transform: translateY(-2px);
  z-index: var(--z-index-overlay);
}

.fftri-result-card:hover .results-bookmark-btn,
.fftri-result-card:focus-within .results-bookmark-btn,
.fftri-result-card.results-card--bookmark-open .results-bookmark-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none), (pointer: coarse) {
  .results-bookmark-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.results-bookmark-btn.is-active {
  color: var(--fftri-orange);
  border-color: color-mix(in srgb, var(--fftri-orange) 42%, transparent);
}

.fftri-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

.group:hover .fftri-tricolor {
  opacity: 1;
  transform: scaleX(1);
}

.fftri-badge--muted {
  background: var(--color-bg-muted);
  color: var(--color-text-default);
  border-color: var(--color-border-soft);
}

.fftri-badge--info {
  background: color-mix(in srgb, var(--fftri-blue) 10%, transparent);
  color: var(--color-brand-700);
  border-color: var(--border-blue-subtle);
}

.fftri-badge--success {
  background: color-mix(in srgb, var(--fftri-teal) 12%, transparent);
  color: var(--color-brand-teal-darker);
  border-color: color-mix(in srgb, var(--fftri-teal) 35%, transparent);
}

.fftri-badge--warning {
  background: color-mix(in srgb, var(--fftri-orange) 12%, transparent);
  color: var(--color-accent-dark);
  border-color: color-mix(in srgb, var(--fftri-orange) 30%, transparent);
}

.fftri-badge--danger {
  background: color-mix(in srgb, var(--fftri-red) 10%, transparent);
  color: var(--color-danger-text);
  border-color: color-mix(in srgb, var(--fftri-red) 35%, transparent);
}

.fftri-badge--solid {
  color: var(--color-white);
  border-color: transparent;
}

.fftri-badge[data-tone] {
  --fftri-badge-tone: var(--fftri-blue);
  --fftri-badge-surface: color-mix(
    in srgb,
    var(--fftri-badge-tone) 12%,
    transparent
  );
  color: var(--fftri-badge-tone);
  border-color: color-mix(in srgb, var(--fftri-badge-tone) 40%, transparent);
  background: var(--fftri-badge-surface);
}

.fftri-badge.fftri-badge--solid[data-tone] {
  color: var(--color-white);
  border-color: var(--fftri-badge-tone);
  background: var(--fftri-badge-tone);
}

.fftri-badge[data-tone="default"] {
  --fftri-badge-tone: var(--color-discipline-default);
}

.fftri-badge[data-tone="triathlon"],
.fftri-badge[data-tone="animathlon"],
.fftri-badge[data-tone="ironman"],
.fftri-badge[data-tone="para_triathlon"],
.fftri-badge[data-tone="relay"] {
  --fftri-badge-tone: var(--color-discipline-tri);
}

.fftri-badge[data-tone="duathlon"] {
  --fftri-badge-tone: var(--color-discipline-dua);
}

.fftri-badge[data-tone="aquathlon"],
.fftri-badge[data-tone="swimrun"],
.fftri-badge[data-tone="rando_aquathlon"] {
  --fftri-badge-tone: var(--color-discipline-aqt);
}

.fftri-badge[data-tone="bikerun"],
.fftri-badge[data-tone="cyclathlon_vetathlon"],
.fftri-badge[data-tone="rando_bike_run"] {
  --fftri-badge-tone: var(--color-discipline-bikerun);
}

.fftri-badge[data-tone="cross_triathlon"],
.fftri-badge[data-tone="cross_duathlon"],
.fftri-badge[data-tone="vtt"] {
  --fftri-badge-tone: var(--color-discipline-cross);
}

.fftri-badge[data-tone="triathlon_neige"],
.fftri-badge[data-tone="duathlon_neige"] {
  --fftri-badge-tone: var(--color-discipline-neige);
}

.fftri-badge[data-tone="raid"],
.fftri-badge[data-tone="enduro"],
.fftri-badge[data-tone="rando_raid"] {
  --fftri-badge-tone: var(--color-discipline-raid);
}

.fftri-badge[data-tone="swimbike"] {
  --fftri-badge-tone: var(--color-discipline-swimbike);
}

.fftri-badge[data-tone="s"]    { --fftri-badge-tone: var(--color-format-s); }
.fftri-badge[data-tone="xs"]   { --fftri-badge-tone: var(--color-format-xs); }
.fftri-badge[data-tone="xxs"]  { --fftri-badge-tone: var(--color-format-xxs); }
.fftri-badge[data-tone="m"]    { --fftri-badge-tone: var(--color-format-m); }
.fftri-badge[data-tone="l"]    { --fftri-badge-tone: var(--color-format-l);}
.fftri-badge[data-tone="xl"]   { --fftri-badge-tone: var(--color-format-xl); }
.fftri-badge[data-tone="xxl"]  { --fftri-badge-tone: var(--color-format-xxl); }
.fftri-badge[data-tone="70.3"] { --fftri-badge-tone: var(--color-format-xl); }

.fftri-badge[data-tone="cr"] {
  --fftri-badge-tone: var(--color-format-cr);
}

.fftri-badge[data-tone="jeunes"] {
  --fftri-badge-tone: var(--color-format-jeunes);
}

.fftri-badge--cancelled {
  text-decoration: line-through;
}

.fftri-map {
  width: 100%;
  height: clamp(220px, 35vh, 320px);
}

.fftri-map-wrap {
  position: relative;
}

.fftri-map-actions {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-map-overlay);
}

.fftri-map-btn {
  width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid
    color-mix(in srgb, var(--color-text-strong) 12%, transparent);
  box-shadow: 0 8px 16px -12px var(--overlay-ink-60);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fftri-blue);
}

.fftri-map-btn:hover {
  color: var(--fftri-teal);
}

.fftri-map-distance {
  position: absolute;
  bottom: var(--space-2-5);
  left: var(--space-2-5);
  background: var(--overlay-white-92);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--color-contrast-high);
  box-shadow: 0 10px 24px -18px var(--overlay-ink-70);
  z-index: var(--z-map-overlay);
}

.fftri-club-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fftri-club-identity__avatar {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.fftri-club-identity__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fftri-club-identity__title {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fftri-club-identity__copy {
  min-width: 0;
}

.fftri-club-identity__location {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-club-identity__meta {
  margin-top: var(--space-1);
}

.fftri-card-link-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
}

.fftri-card-link-row__label {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.fftri-card-link-row__chevron {
  color: var(--color-text-soft);
  font-size: var(--type-meta);
}

.fftri-club-detail-users-link {
  padding: var(--space-4);
}

.fftri-card-coords {
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  font-weight: 600;
  line-height: 1.45;
}

.fftri-inline-trial-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: left;
}

.fftri-inline-trial-card--past {
  opacity: 0.5;
}

.fftri-inline-trial-card__copy {
  min-width: 0;
}

.fftri-inline-trial-card__title {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-inline-trial-card__meta {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-inline-trial-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.fftri-inline-trial-card__chevron {
  color: var(--color-text-soft);
  font-size: var(--type-meta);
}

.fftri-club-marker {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  position: relative;
  display: block;
  overflow: visible;
}

.fftri-club-marker__pin {
  width: 22px;
  height: 22px;
  background: var(--fftri-blue);
  border-radius: var(--radius-pin);
  transform: rotate(-45deg);
  position: absolute;
  left: var(--space-0-75);
  top: 0;
  z-index: 1;
  box-shadow: 0 8px 16px -10px var(--overlay-ink-80);
  animation: fftri-bounce 1.6s ease-in-out infinite;
}

.fftri-club-marker__pin::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-bg);
  border-radius: var(--radius-circle);
  top: var(--space-1-5);
  left: var(--space-1-5);
}

.leaflet-div-icon {
  background: transparent;
  border: none;
}

.fftri-map-popup {
  min-width: 160px;
}

.fftri-map-popup-btn {
  display: inline-flex;
  margin-top: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2-5);
  border-radius: var(--radius-pill);
  background: var(--fftri-blue);
  color: var(--color-white);
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
}

.fftri-map-popup-btn:hover {
  background: var(--fftri-teal);
}

.leaflet-bottom.leaflet-right {
  margin-bottom: var(--space-12);
}

@keyframes fftri-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(-45deg);
  }
  50% {
    transform: translateY(-6px) rotate(-45deg);
  }
}

.fftri-badge--overlay {
  background: var(--glass-bg);
  color: var(--color-white);
  border-color: var(--glass-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fftri-badge--accent {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
}

.fftri-badge--teal {
  background: var(--color-brand-teal-dark);
  border-color: var(--color-brand-teal-dark);
  color: var(--color-white);
}

.fftri-event-gradient {
  background: var(--gradient-fftri-blue-overlay);
}

.fftri-card-hover {
  transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-card-hover:hover {
  box-shadow: 0 10px 24px var(--overlay-ink-12);
  transform: translateY(-2px);
}

.fftri-empty-state__art {
  width: 92px;
  margin: 0 auto 12px;
  color: var(--color-primary);
  opacity: 0.94;
}

.fftri-empty-state__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.fftri-trial-editions-swipe-area,
.trial-editions-swipe-area {
  touch-action: pan-y;
  will-change: transform;
}

.fftri-trial-editions-swipe-area.is-swipe-dragging,
.trial-editions-swipe-area.is-swipe-dragging {
  transition: none !important;
}

.fftri-trial-editions-dots,
.trial-editions-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5);
}

.fftri-trial-editions-dot,
.trial-editions-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--overlay-gray-500-35);
  transition: transform var(--duration-normal) ease, background-color var(--duration-normal) ease;
}

.fftri-trial-editions-dot--active,
.trial-editions-dot--active {
  background: var(--fftri-blue);
  transform: scale(1.2);
}

.notif-row,
.fftri-notif-row {
  touch-action: pan-y;
  will-change: transform, opacity;
  transition:
    transform var(--duration-fast) ease,
    opacity var(--duration-fast) ease,
    max-height var(--duration-normal) ease,
    margin var(--duration-normal) ease;
  overflow: hidden;
  max-height: 12rem;
}

.notif-row.is-swipe-dragging,
.fftri-notif-row.is-swipe-dragging {
  transition: none !important;
}

.notif-row.notif--dismissed,
.fftri-notif-row.notif--dismissed {
  transform: translateX(-104px);
  opacity: 0;
}

.notif-row.notif--collapsing,
.fftri-notif-row.notif--collapsing {
  max-height: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  opacity: 0;
}

.notif-group,
.fftri-notif-group {
  border: 1px solid var(--color-contrast-lower);
  border-radius: var(--radius-xl);
  background: var(--color-bg);
  box-shadow: 0 1px 6px var(--overlay-dark-04);
  padding: var(--space-1);
}

.notif-group__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg);
  user-select: none;
}

.notif-group__summary::-webkit-details-marker {
  display: none;
}

.notif-group__title {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  font-weight: var(--fw-extrabold);
  color: var(--color-contrast-higher);
}

.notif-group__chevron {
  color: var(--color-contrast-medium);
  font-size: var(--type-label);
  transition: transform var(--duration-normal) ease;
}

.notif-group[open] .notif-group__chevron {
  transform: rotate(180deg);
}

.notif-group__items {
  padding: var(--space-0-5) var(--space-1) var(--space-1-5);
  display: grid;
  gap: var(--space-3);
}

.results-row--highlight {
  background: var(--overlay-brand-blue-08);
  border-left: var(--space-0-75) solid var(--fftri-blue);
  scroll-margin-top: var(--space-24);
}

[data-theme="dark"] .results-row--highlight {
  background: var(--overlay-brand-blue-light-18);
  border-left-color: var(--color-dark-info);
}

.event-like-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--overlay-ink-deep-24);
  border: 1px solid var(--overlay-white-38);
  backdrop-filter: blur(3px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.event-like-badge--floating {
  position: absolute;
  top: var(--space-2-5);
  right: var(--space-2-5);
  z-index: var(--z-index-shell-bottom-nav);
  cursor: pointer;
}

.event-card--liked .event-like-badge {
  background: var(--overlay-white-92);
  border-color: var(--overlay-white-96);
}

@keyframes fftri-like-pop {
  0% {
    transform: translateX(0) scale(1);
  }
  45% {
    transform: translateX(4px) scale(1.015);
  }
  100% {
    transform: translateX(0) scale(1);
  }
}

.fftri-input {
  background: var(--color-bg);
  border: 1px solid var(--overlay-brand-blue-22);
  border-radius: var(--radius-full);
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-input-surface {
  background: var(--color-bg-surface);
  border-color: var(--color-border-soft);
  border-radius: var(--radius-md);
}

.fftri-screen-topbar {
  background: var(--color-bg-surface);
  padding: var(--space-2) var(--space-5) var(--space-3);
  backdrop-filter: blur(var(--shadow-blur, 8px));
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
}

.fftri-notifications-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-topbar-subtitle {
  color: color-mix(in srgb, var(--screen-accent) 78%, var(--color-text-muted));
  font-size: var(--type-ui);
  font-weight: 500;
}

.fftri-topbar-subtitle--challenge {
  margin-top: var(--space-1);
}

.fftri-challenges-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-challenges-topbar__copy {
  min-width: 0;
}

.fftri-topbar-panel-title,
.fftri-panel-title,
.fftri-copy-xs-overline {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.fftri-screen-topbar--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-index-overlay);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--screen-accent) 10%, var(--color-bg-surface)) 0%,
    var(--color-bg-surface) 100%
  );
  border-top: var(--space-0-75) solid var(--screen-accent);
  border-bottom-color: color-mix(
    in srgb,
    var(--screen-accent) 14%,
    var(--color-border-soft)
  );
  transition:
    background var(--duration-medium) ease,
    border-top-color var(--duration-medium) ease,
    border-bottom-color var(--duration-medium) ease,
    transform var(--duration-snappy) ease,
    opacity var(--duration-fast) ease;
  will-change: transform, opacity;
}

.fftri-screen-topbar--hidden {
  transform: translateY(calc(-100% - 12px));
  opacity: 0.02;
  pointer-events: none;
}

.fftri-detail-tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-index-overlay);
  display: flex;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-soft);
}

.fftri-detail-tabs--pills {
  padding: var(--space-2) var(--space-4);
}

.fftri-challenge-tabs-pill-group {
  width: 100%;
}

.fftri-challenge-tabs-pill-group .fftri-pill {
  flex: 1;
  justify-content: center;
}

.fftri-input:focus {
  outline: none;
  border-color: var(--overlay-brand-blue-60);
  box-shadow: 0 0 0 3px var(--overlay-brand-blue-15);
}

.fftri-select {
  background: var(--color-bg);
  border: 1px solid var(--overlay-brand-blue-22);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}

.fftri-select-field {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-default);
  font-size: var(--type-ui);
  font-weight: 600;
  box-sizing: border-box;
  max-width: 100%;
}

.fftri-select:focus {
  outline: none;
  border-color: var(--overlay-brand-blue-60);
  box-shadow: 0 0 0 3px var(--overlay-brand-blue-15);
}

.fftri-icon-btn {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 20%, transparent);
  color: var(--ui-accent);
  border-radius: var(--radius-full);
  min-width: var(--tap-target-compact);
  min-height: var(--tap-target-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.fftri-icon-btn:hover {
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--color-bg));
  box-shadow: 0 6px 14px var(--overlay-ink-10);
  transform: translateY(-1px);
}

.fftri-icon-btn:disabled,
.fftri-icon-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.fftri-pill {
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.fftri-pill:hover {
  box-shadow: 0 6px 14px var(--overlay-ink-10);
  transform: translateY(-1px);
}

.fftri-pill.fftri-pill--active,
.fftri-pill[aria-pressed="true"] {
  background: var(--filter-active-bg);
  border-color: var(--filter-active-border);
  color: var(--filter-active-color);
}

.fftri-pill--inactive {
  background: var(--color-bg-surface);
  border-color: var(--color-border-soft);
  color: var(--color-text-muted);
}

.fftri-pill-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  border: 1px solid var(--color-border-soft);
}

.fftri-pill-group--light {
  background: var(--color-bg-muted);
  border-color: var(--color-border-soft);
}

.fftri-pill-group--blue {
  background: var(--overlay-brand-blue-10);
  border-color: var(--overlay-brand-blue-22);
}

.fftri-pill-group--wrap {
  flex-wrap: wrap;
}

.fftri-quick-filters {
  position: relative;
}

.fftri-quick-filters--topbar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}

.fftri-quick-filters--topbar::-webkit-scrollbar {
  display: none;
}

.fftri-quick-filters::before,
.fftri-quick-filters::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 1;
}

.fftri-quick-filters::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--color-bg-surface) 0%,
    transparent 100%
  );
}

.fftri-quick-filters::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--color-bg-surface) 0%,
    transparent 100%
  );
}

.fftri-icon-btn:focus-visible,
.fftri-pill:focus-visible,
.hero-back-circle:focus-visible,
.hero-compare-btn:focus-visible,
.fftri-hero-user-action-btn:focus-visible,
.hero-user-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring-inner), 0 0 0 4px var(--color-brand-600);
}

button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring-inner), 0 0 0 4px var(--color-brand-600);
}

.hero-back button:focus-visible .hero-back-circle {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-focus-ring-inner), 0 0 0 4px var(--color-brand-600);
}

.fftri-card,
.fftri-card-action {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.fftri-card-muted {
  background: var(--color-bg-muted);
}

.fftri-card-shadow {
  box-shadow: var(--shadow-sm);
}

.fftri-card-action {
  color: var(--color-text-default);
  cursor: pointer;
  transition:
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.fftri-card-action:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.fftri-card-action:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-xs);
}

.fftri-card-action:disabled,
.fftri-card-action[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  border-color: var(--color-border-soft);
  pointer-events: none;
}

.fftri-card-action--accent {
  color: var(--color-brand-600);
}

.fftri-card-action--compact {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
}

.fftri-card-action--full {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
  text-align: center;
}

.fftri-surface-hover {
  transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.fftri-surface-hover:hover {
  background: var(--color-bg-muted);
}

.fftri-club-detail-page {
  padding-bottom: var(--space-24);
}

.fftri-club-detail-map-card {
  padding: 0;
  overflow: hidden;
}

.fftri-club-detail-header-card {
  position: relative;
  padding: var(--space-4);
}

.fftri-club-detail-header-stripe {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--space-1) + 2px);
  pointer-events: none;
}

.fftri-club-detail-section-card {
  padding: var(--space-4);
}

.fftri-club-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.fftri-club-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.fftri-club-detail-contact-card {
  margin-top: var(--space-3);
  padding: var(--space-4);
}

.fftri-club-detail-info-grid {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-2);
}

.fftri-club-detail-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-end;
}

.fftri-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fftri-card-list--loose {
  gap: var(--space-4);
}

.fftri-page-shell {
  padding: var(--space-4);
}

.fftri-top-stripe-danger {
  box-shadow: 0 2px 6px var(--overlay-black-35);
}

.fftri-top-stripe-danger-fill {
  background: var(--fftri-red);
}

.fftri-accent-tile {
  width: calc(var(--space-4) * 3);
  height: calc(var(--space-4) * 3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--screen-accent);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.fftri-accent-tile--sm {
  width: calc((var(--space-4) * 2) + var(--space-2));
  height: calc((var(--space-4) * 2) + var(--space-2));
}

.fftri-card-interactive {
  cursor: pointer;
  transition:
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.fftri-card-interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.fftri-card-interactive:active {
  transform: scale(0.99);
  box-shadow: var(--shadow-xs);
}

.fftri-card-glass-pane {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px);
}

.fftri-card-panel-muted {
  background: var(--color-bg-muted);
}

.fftri-card-panel-fill {
  width: 100%;
  height: 100%;
}

.fftri-card-pad-sm {
  padding: var(--space-3);
}

.fftri-card-pad-md {
  padding: var(--space-4);
}

.fftri-card-pad-lg {
  padding: var(--space-5);
}

.fftri-card-title-gap {
  margin-bottom: var(--space-2);
}

.fftri-card-subtitle-gap-xs {
  margin-top: var(--space-0-5);
}

.fftri-card-muted-copy {
  color: var(--color-text-muted);
  font-size: var(--type-ui);
  font-weight: 600;
  line-height: 1.45;
}

.fftri-card-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-2xs);
  border: 1px solid transparent;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-card-chip--overlay {
  background: var(--overlay-white-20);
  border-color: var(--overlay-white-12);
  color: var(--color-white);
}

.fftri-card-chip--muted {
  background: var(--color-contrast-lower);
  border-color: var(--overlay-brand-blue-28);
  color: var(--color-primary-dark);
}

.fftri-card-chip--outlined {
  background: transparent;
}

.fftri-badge-label--strong {
  font-weight: var(--fw-extrabold);
}

.fftri-pill-base {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-soft);
  font-weight: 600;
  transition:
    background var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.fftri-pill-base--compact {
  padding: var(--space-1) 10px;
}

.fftri-pill-base--full {
  padding: var(--space-1-5) var(--space-3);
}

.fftri-pill-base--stretch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
}

.fftri-alert {
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
}

.fftri-alert--danger {
  border-color: color-mix(in srgb, var(--fftri-red) 25%, transparent);
  background: color-mix(in srgb, var(--fftri-red) 10%, var(--color-bg-surface));
  color: var(--fftri-red);
}

.fftri-alert--neutral {
  color: var(--color-text-muted);
}

.fftri-status-text--full {
  color: var(--fftri-red);
  font-weight: var(--fw-bold);
}

.fftri-status-text--closing {
  color: var(--fftri-orange);
  font-weight: 600;
}

.fftri-status-text--cancelled {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--fftri-red);
  border-radius: var(--radius-full);
  padding: var(--space-0-5) var(--space-2);
  background: var(--overlay-white-10);
  color: var(--fftri-red);
  font-weight: var(--fw-bold);
}

.fftri-status-text--open {
  color: var(--fftri-teal);
  font-weight: 600;
}

.fftri-user-avatar-fallback-label {
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
}

.fftri-user-club-meta {
  color: var(--color-text-muted);
}

.fftri-user-name-accent {
  color: var(--color-text-strong);
}

.fftri-card-empty-state {
  padding: var(--space-3) var(--space-4);
}

.fftri-button-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
}

.fftri-button-inline--full {
  width: 100%;
}

.fftri-button-inline--primary {
  padding: var(--space-3) var(--space-6);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
}

.fftri-checklist-tone--swim {
  color: var(--fftri-blue);
  background: var(--color-checklist-swim-bg);
}

.fftri-checklist-tone--bike {
  color: var(--fftri-orange);
  background: var(--color-checklist-bike-bg);
}

.fftri-checklist-tone--run {
  color: var(--fftri-teal);
  background: var(--color-checklist-run-bg);
}

.fftri-checklist-tone--gear {
  color: var(--color-checklist-gear);
  background: var(--color-checklist-gear-bg);
}

.fftri-checklist-tone--ski {
  color: var(--color-checklist-ski);
  background: var(--color-checklist-ski-bg);
}

.fftri-checklist-tone--canoe {
  color: var(--color-checklist-canoe);
  background: var(--color-checklist-canoe-bg);
}

.fftri-checklist-tone--travel {
  color: var(--color-checklist-travel);
  background: var(--color-checklist-travel-bg);
}

.fftri-checklist-tone--last-minute {
  color: var(--color-checklist-last-minute);
  background: var(--color-checklist-last-minute-bg);
}

.fftri-checklist-tone--logistics {
  color: var(--color-checklist-logistics);
  background: var(--color-checklist-logistics-bg);
}

.fftri-checklist-progress--swim {
  background: var(--fftri-blue);
}

.fftri-checklist-progress--bike {
  background: var(--fftri-orange);
}

.fftri-checklist-progress--run {
  background: var(--fftri-teal);
}

.fftri-checklist-progress--gear {
  background: var(--color-checklist-gear);
}

.fftri-checklist-progress--ski {
  background: var(--color-checklist-ski);
}

.fftri-checklist-progress--canoe {
  background: var(--color-checklist-canoe);
}

.fftri-checklist-progress--travel {
  background: var(--color-checklist-travel);
}

.fftri-checklist-progress--last-minute {
  background: var(--color-checklist-last-minute);
}

.fftri-checklist-progress--logistics {
  background: var(--color-checklist-logistics);
}

.fftri-checklist-item--checked {
  background: var(--color-checklist-checked-bg);
}

.fftri-checklist-checkbox--checked {
  background: var(--color-checklist-checked-border);
  border-color: var(--color-checklist-checked-border);
  color: var(--color-white);
}

.fftri-checklist-item-text--checked {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-checklist-checked-line);
}

.fftri-checklist-hint {
  display: block;
  margin-top: var(--space-0-5);
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  line-height: 1.4;
}

.fftri-checklist-progress-track {
  background: var(--color-checklist-progress-track);
}

.fftri-checklist-summary-fill {
  background: linear-gradient(
    90deg,
    var(--color-checklist-summary-fill-start),
    var(--color-checklist-summary-fill-end)
  );
}

.fftri-checklist-callout {
  width: 100%;
  text-align: left;
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: var(--space-4);
  background: var(--gradient-checklist-btn);
  box-shadow: var(--shadow-checklist-callout);
}

.fftri-checklist-callout__icon {
  width: 3.5rem;
  height: 3.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
}

.fftri-checklist-callout__badge {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: calc(var(--space-2) * -1);
  min-width: 22px;
  height: 22px;
  padding: 0 var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--fftri-red);
  color: var(--color-white);
  font-size: var(--type-caption);
  font-weight: var(--fw-extrabold);
}

.fftri-checklist-callout__title {
  font-size: var(--font-size-20);
  line-height: 1;
  font-weight: var(--fw-black);
  text-transform: uppercase;
}

.fftri-checklist-callout__subtitle {
  margin-top: var(--space-2);
  color: var(--overlay-white-90);
  font-size: var(--type-body-sm);
  line-height: 1.45;
}

.fftri-checklist-callout__progress-label {
  color: var(--color-success);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
}

.fftri-checklist-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) calc(var(--space-2) + var(--space-1));
  text-align: left;
  border-radius: var(--radius-lg);
}

.fftri-checklist-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  color: transparent;
}

.fftri-checklist-item-text {
  display: block;
  color: var(--color-text-default);
  font-size: var(--type-ui);
}

.fftri-checklist-required-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: var(--space-0-5) 6px;
  border-radius: var(--radius-sm);
  font-size: var(--type-caption);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.fftri-checklist-section-title {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-black);
}

.fftri-checklist-section-meta {
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  margin-top: var(--space-0-5);
}

.fftri-checklist-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.fftri-checklist-checkbox__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fftri-checklist-copy,
.fftri-checklist-section-copy,
.fftri-trial-event-link__copy {
  display: block;
  min-width: 0;
}

.fftri-checklist-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.fftri-checklist-section-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-xl);
}

.fftri-checklist-section-icon-symbol {
  font-size: var(--type-ui);
}

.fftri-checklist-section-progress {
  width: 4rem;
}

.fftri-checklist-section-chevron {
  font-size: var(--type-meta);
}

.fftri-checklist-section-items {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fftri-checklist-summary {
  padding: 0 var(--space-4) var(--space-4);
}

.fftri-checklist-summary-progress {
  height: 0.5rem;
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius-full);
}

.fftri-checklist-summary-meta {
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--type-meta);
}

.fftri-checklist-summary-percent,
.fftri-trial-progress-value {
  color: var(--color-text-default);
  font-weight: var(--fw-bold);
}

.fftri-checklist-reset {
  width: 100%;
}

.fftri-checklist-check-icon {
  font-size: var(--type-meta);
}

.fftri-card-title {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.fftri-card-title--sm {
  font-size: var(--type-ui);
  line-height: 1.35;
}

.fftri-card-title--md {
  font-size: var(--type-heading-sm);
  line-height: 1.35;
}

.fftri-card-subtitle {
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.45;
}

.fftri-card-meta {
  color: var(--color-text-muted);
}

.fftri-card-overline {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.fftri-card-value {
  color: var(--text);
  font-weight: var(--fw-extrabold);
}

.fftri-card-value--sm {
  font-size: var(--type-ui);
}

.fftri-card-value--md {
  font-size: var(--type-heading);
}

.fftri-heading-md {
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
}

.fftri-copy-sm-muted {
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.45;
}

.fftri-copy-sm-strong {
  color: var(--color-text-default);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
  line-height: 1.45;
}

.fftri-data-digit {
  color: var(--color-text-strong);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.fftri-data-digit--sm {
  font-size: var(--type-heading-sm);
}

.fftri-data-digit--md {
  font-size: var(--type-display);
}

.fftri-data-digit--lg {
  font-size: var(--type-hero);
}

.fftri-data-unit {
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: var(--space-0-5);
  text-transform: uppercase;
}

.fftri-data-time {
  color: var(--color-text-default);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
}

.fftri-data-time--strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-extrabold);
}

.fftri-data-rank--gold {
  color: var(--color-rank-gold);
}

.fftri-data-rank--silver {
  color: var(--color-rank-silver);
}

.fftri-data-rank--bronze {
  color: var(--color-rank-bronze);
}

.fftri-card-copy {
  padding: var(--space-4);
}

.fftri-copy-xs-strong {
  color: var(--color-text-default);
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.fftri-copy-sm-strong-inverse {
  color: var(--color-white);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
  line-height: 1.4;
}

.fftri-copy-xs-overline-inverse {
  color: var(--overlay-white-80);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-copy-xs-muted-inverse {
  color: var(--overlay-white-80);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-copy-sm-strong-accent {
  color: var(--color-brand-600);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.fftri-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.fftri-section-header--sm {
  gap: var(--space-1);
}

.fftri-section-header-title {
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-section-header-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.fftri-section-header-title--sm {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-section-header-subtitle--sm {
  font-size: var(--type-meta);
}

.fftri-link-accent {
  color: var(--color-brand-600);
  font-weight: 600;
}

.fftri-input-field {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-default);
  font-size: var(--type-ui);
  font-weight: 600;
}

.fftri-form-label {
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-results-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.fftri-topbar-advanced-panel {
  margin-top: var(--space-3);
}

.fftri-filter-panel {
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.fftri-filter-panel__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.fftri-filter-panel__title {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-filter-panel__reset {
  background: transparent;
  border: 0;
  color: var(--ui-accent);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  padding: 0;
}

.fftri-filter-panel__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
}

.fftri-filter-panel__sort {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.fftri-filter-panel__sort-select {
  flex: 1;
}

.fftri-icon-btn--padded {
  padding: var(--space-2);
}

.fftri-list-status {
  padding-top: var(--space-2);
  text-align: center;
}

.fftri-page-bottom-spaced {
  padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}

.fftri-detail-panel {
  margin-top: var(--space-2);
  background: var(--color-bg-surface);
}

.fftri-detail-panel__content {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.fftri-detail-panel__content--compact {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.fftri-detail-panel__stack > * + * {
  margin-top: var(--space-6);
}

.fftri-detail-panel__stack--compact > * + * {
  margin-top: var(--space-4);
}

.fftri-empty-state-card {
  position: relative;
  z-index: var(--z-index-base);
  isolation: isolate;
  padding: var(--space-4);
  text-align: center;
}

.fftri-notifications-clear-btn {
  background: transparent;
  border: 0;
  color: var(--ui-accent);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  padding: 0;
}

.fftri-status-loader-line {
  margin-top: var(--space-2);
}

.fftri-placeholder-shell {
  padding: var(--space-4);
}

.fftri-placeholder-card,
.fftri-auth-card {
  padding: var(--space-5);
}

.fftri-placeholder-subtitle,
.fftri-auth-card__subtitle {
  margin-top: var(--space-1);
}

.fftri-placeholder-roadmap {
  margin-top: var(--space-4);
  padding: var(--space-4);
}

.fftri-placeholder-list,
.fftri-auth-form {
  margin-top: var(--space-3);
}

.fftri-placeholder-list > * + *,
.fftri-auth-form > * + * {
  margin-top: var(--space-2);
}

.fftri-placeholder-list__item,
.fftri-auth-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.fftri-placeholder-list__icon {
  color: var(--ui-accent);
  margin-top: var(--space-1);
}

.fftri-placeholder-cta,
.fftri-auth-form__submit,
.fftri-account-primary-action {
  width: 100%;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-weight: var(--fw-bold);
}

.fftri-language-card {
  padding: var(--space-4);
}

.fftri-language-card-content {
  margin-top: var(--space-3);
}

.fftri-language-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.fftri-language-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-compact);
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-soft);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.fftri-language-option:hover {
  border-color: color-mix(in srgb, var(--color-brand-600) 35%, var(--color-border-soft));
  color: var(--color-text-default);
}

.fftri-language-option.is-active {
  border-color: var(--color-brand-600);
  background: color-mix(in srgb, var(--color-brand-600) 10%, var(--color-bg));
  color: var(--color-brand-700);
}

.fftri-language-option__flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid var(--color-border-soft);
  object-fit: cover;
}

.fftri-language-option__code {
  letter-spacing: 0.04em;
}

[data-theme="dark"] .fftri-language-option {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .fftri-language-option:hover {
  border-color: var(--overlay-dark-text-36);
  color: var(--color-dark-text);
}

[data-theme="dark"] .fftri-language-option.is-active {
  border-color: var(--color-dark-info-strong);
  background: color-mix(in srgb, var(--color-dark-info-strong) 18%, transparent);
  color: var(--color-dark-info-strong);
}

.fftri-topbar-panel-body {
  padding: var(--space-3);
}

.fftri-detail-overlay-action {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-index-shell-bottom-nav);
}

.fftri-detail-overlay-action--low {
  z-index: var(--z-index-overlay);
}

.fftri-detail-inline-countdown {
  margin-top: var(--space-2);
}

.fftri-trial-results-switcher {
  padding-bottom: var(--space-2);
}

.fftri-trial-results-switcher-card {
  padding: var(--space-3);
}

.fftri-trial-results-skeleton {
  padding-top: var(--space-4);
}

.fftri-trial-results-skeleton__panel {
  padding: var(--space-4);
}

.fftri-trial-results-skeleton__line {
  margin-top: var(--space-2);
}

.fftri-trial-results-skeleton__list {
  display: grid;
  gap: var(--space-3);
}

.fftri-challenge-hero-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-challenge-hero-copy {
  min-width: 0;
}

.fftri-challenge-hero-subtitle {
  margin-top: var(--space-0-5);
}

.fftri-challenge-hero-card-wrap {
  position: relative;
  z-index: var(--z-index-overlay);
  margin-top: var(--space-3);
}

.fftri-challenge-hero-card {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  background: var(--color-surface-raised);
}

.fftri-challenge-hero-card-body {
  position: relative;
  z-index: var(--z-index-overlay);
  padding: var(--space-4);
  min-height: 12rem;
  display: flex;
  align-items: flex-end;
  text-shadow: 0 1px 3px var(--overlay-dark-40);
}

.fftri-challenge-hero-card-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-challenge-hero-card-copy {
  min-width: 0;
}

.fftri-challenge-hero-card-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-h2h-advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-h2h-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.fftri-h2h-count {
  padding-top: var(--space-2);
  text-align: center;
}

.fftri-info-tile {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.fftri-info-tile__content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--space-3);
}

.fftri-info-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.fftri-info-tile__copy {
  min-width: 0;
  flex: 1;
}

.fftri-info-tile__value {
  display: block;
  color: var(--color-text-default);
  font-size: var(--type-ui);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.fftri-info-tile__chevron {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.fftri-fill-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fftri-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-document-item__body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fftri-challenge-card {
  position: relative;
  z-index: var(--z-index-base);
  isolation: isolate;
  overflow: hidden;
  min-height: 14rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-surface-raised);
}

.fftri-challenge-card .fftri-card-title {
  color: var(--color-white);
}

.fftri-challenge-card .fftri-card-subtitle,
.fftri-challenge-card__subtitle {
  color: var(--overlay-white-88);
}

.fftri-challenge-card__meta .fftri-card-chip--overlay {
  background: var(--overlay-white-92);
  border-color: var(--overlay-white-96);
  color: var(--color-brand-700);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

[data-theme="dark"] .fftri-challenge-card .fftri-card-title {
  color: var(--color-white);
}

[data-theme="dark"] .fftri-challenge-card .fftri-card-subtitle,
[data-theme="dark"] .fftri-challenge-card__subtitle {
  color: var(--overlay-white-88);
}

[data-theme="dark"] .fftri-challenge-card__meta .fftri-card-chip--overlay {
  background: var(--overlay-white-88);
  border-color: var(--overlay-white-38);
  color: var(--color-brand-700);
}

.fftri-challenge-card__action {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-shell-bottom-nav);
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.fftri-challenge-card__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-base);
  height: 100%;
}

.fftri-challenge-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fftri-challenge-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--overlay-dark-20) 0%,
    var(--overlay-dark-40) 38%,
    var(--overlay-dark-60) 100%
  );
}

.fftri-challenge-card__meta {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-white);
}

.fftri-challenge-card__body {
  position: relative;
  z-index: var(--z-index-overlay);
  padding: var(--space-4);
  margin-top: auto;
  text-shadow: 0 1px 3px var(--overlay-dark-40);
}

.fftri-challenge-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-challenge-card__copy {
  min-width: 0;
}

.fftri-challenge-card__subtitle {
  margin-top: var(--space-0-5);
}

.fftri-challenge-card__actions {
  position: relative;
  z-index: var(--z-index-overlay);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.fftri-notification-card {
  width: 100%;
  padding: var(--space-4);
  display: flex;
  gap: var(--space-3);
  text-align: left;
}

.fftri-notification-card__body {
  min-width: 0;
  flex: 1;
}

.fftri-notification-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.fftri-notification-card__subtitle {
  margin-top: var(--space-1);
}

.fftri-notification-card__time {
  margin-top: var(--space-2);
}

.fftri-user-identity {
  display: flex;
  align-items: center;
  min-width: 0;
}

.fftri-user-identity--avatar {
  gap: var(--space-3);
}

.fftri-user-identity--compact {
  gap: var(--space-2);
}

.fftri-user-identity__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fftri-user-identity__copy {
  min-width: 0;
}

.fftri-user-identity__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-user-identity__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-user-identity__name-strong {
  font-weight: 600;
}

.fftri-user-identity__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-challenge-gender-switch {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
}

.fftri-gender-accent--men {
  color: var(--fftri-men);
}

.fftri-gender-accent--women {
  color: var(--fftri-women);
}

.fftri-challenge-follow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
  transition:
    border-color var(--duration-fast) ease,
    background var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.fftri-challenge-follow-btn--block {
  width: 100%;
  min-height: 2.75rem;
  font-size: var(--fs-sm);
}

.fftri-challenge-follow-btn--idle {
  background: var(--color-bg-surface);
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-default);
}

.fftri-challenge-follow-btn--active {
  border-color: var(--fftri-blue);
  background: color-mix(in srgb, var(--fftri-blue) 10%, transparent);
  color: var(--fftri-blue);
}

.fftri-challenge-follow-btn__icon {
  margin-right: var(--space-2);
}

.fftri-challenge-podium-head,
.fftri-challenge-ranking-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fftri-challenge-podium-row {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-challenge-podium-row__identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.fftri-challenge-podium-row__rank {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.fftri-challenge-ranking-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2);
}

.fftri-challenge-ranking-head__rank {
  grid-column: span 2 / span 2;
}

.fftri-challenge-ranking-head__user {
  grid-column: span 9 / span 9;
}

.fftri-challenge-ranking-head__points {
  grid-column: span 1 / span 1;
  text-align: right;
}

.fftri-challenge-ranking-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  align-items: center;
  border-top: 1px solid var(--color-border-soft);
}

.fftri-challenge-ranking-row__rank {
  grid-column: span 2 / span 2;
}

.fftri-challenge-ranking-row__gender-rank {
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-challenge-ranking-row__user {
  grid-column: span 9 / span 9;
}

.fftri-challenge-ranking-row__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.fftri-challenge-ranking-row__points {
  grid-column: span 1 / span 1;
  text-align: right;
}

.fftri-challenge-ranking-stack {
  display: grid;
  gap: var(--space-4);
}

.fftri-challenge-ranking-toggle {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--fw-bold);
  text-align: center;
}

.fftri-challenge-rules {
  padding: var(--space-4);
}

.fftri-challenge-rules__title {
  margin-bottom: var(--space-2);
}

.fftri-challenge-rules__actions {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.fftri-challenge-action-btn {
  min-height: 2.75rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-align: center;
}

.fftri-challenge-action-btn--disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.fftri-challenge-action-btn__icon {
  margin-right: var(--space-2);
}

.fftri-challenge-rule-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.fftri-challenge-rule-item__icon {
  color: var(--fftri-blue);
  margin-top: var(--space-1);
}

.fftri-challenge-history-subtitle {
  margin-top: var(--space-0-5);
}

.fftri-challenge-history-stack {
  display: grid;
  gap: var(--space-4);
}

.fftri-challenge-history-card-header {
  gap: 0;
}

.fftri-challenge-history-card-title {
  color: var(--color-text-soft);
  font-size: var(--type-label);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.fftri-list-divider-stack > * + * {
  border-top: 1px solid var(--color-border-soft);
}

.fftri-challenge-history-row {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.fftri-challenge-history-row__copy {
  min-width: 0;
}

.fftri-challenge-history-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-challenge-history-row__winner {
  margin-top: var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-challenge-history-row__points {
  flex-shrink: 0;
}

.fftri-challenge-detail-media {
  position: absolute;
  inset: 0;
  height: 100%;
}

.fftri-challenge-detail-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fftri-challenge-detail-follow-card {
  padding: var(--space-3);
}

.fftri-challenge-note-card {
  padding: var(--space-4);
}

.fftri-challenge-note-card__text {
  margin-top: var(--space-1);
}

.fftri-action-surface {
  position: absolute;
  inset: 0;
  z-index: var(--z-index-shell-bottom-nav);
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.fftri-notification-card {
  position: relative;
  z-index: var(--z-index-base);
  isolation: isolate;
}

.fftri-detail-panel__stack--tight > * + * {
  margin-top: var(--space-4);
}

.fftri-detail-results-list {
  padding-top: var(--space-1);
}

.fftri-detail-meta-icon {
  margin-right: var(--space-2);
}

.fftri-detail-meta-separator {
  margin: 0 var(--space-2);
}

.fftri-weather-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.fftri-weather-condition-badge--ideal {
  background: var(--overlay-brand-teal-15);
  color: var(--fftri-teal);
}

.fftri-weather-condition-badge--ok {
  background: var(--overlay-brand-orange-15);
  color: var(--fftri-orange);
}

.fftri-weather-condition-badge--hard {
  background: var(--overlay-brand-red-12);
  color: var(--fftri-red);
}

.fftri-weather-condition-badge--unknown {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.fftri-weather-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--type-meta);
}

.fftri-weather-summary .fftri-weather-row + .fftri-weather-row {
  margin-top: var(--space-2);
}

.fftri-weather-row__label {
  color: var(--color-text-default);
  font-weight: var(--fw-bold);
}

.fftri-weather-row__tone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-weather-row__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.fftri-weather-row__value {
  color: var(--color-text-muted);
  text-align: right;
}

.fftri-weather-card {
  margin-top: var(--space-4);
  padding: var(--space-3);
}

.fftri-weather-card__grid {
  display: grid;
  gap: var(--space-3);
  color: var(--color-text-default);
  font-size: var(--type-meta);
}

.fftri-weather-section {
  display: grid;
  gap: var(--space-1);
}

.fftri-weather-detail-stack {
  display: grid;
  gap: var(--space-1);
}

.fftri-weather-seasonal-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.fftri-weather-label {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-weather-meta-icon {
  color: var(--color-text-muted);
}

.fftri-weather-code {
  color: var(--color-text-soft);
}

.fftri-weather-alert {
  color: var(--fftri-red);
  font-weight: var(--fw-bold);
}

.fftri-weather-copy {
  color: var(--color-text-default);
}

.fftri-weather-stack {
  margin-top: var(--space-1);
  display: grid;
  gap: var(--space-1);
}

.fftri-weather-copy--muted {
  color: var(--color-text-muted);
}

.fftri-weather-aqi-neutral {
  color: var(--color-text-muted);
}

.fftri-weather-aqi-label {
  font-weight: 600;
}

.fftri-weather-empty {
  color: var(--color-text-muted);
  font-size: var(--type-body-sm);
  font-weight: 600;
}

.fftri-weather-footer {
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
}

.fftri-weather-refresh {
  color: var(--color-brand-600);
  font-weight: var(--fw-bold);
  transition: color var(--duration-fast) ease;
}

.fftri-weather-refresh:hover {
  color: var(--color-brand-blue-deep);
}

.fftri-weather-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-weather-kicker {
  color: var(--color-text-muted);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-weather-title {
  color: var(--color-text-strong);
  font-size: var(--type-body-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-weather-aqi--good {
  color: var(--fftri-teal);
}

.fftri-weather-aqi--correct {
  color: var(--fftri-blue);
}

.fftri-weather-aqi--warning {
  color: var(--fftri-orange);
}

.fftri-weather-aqi--danger {
  color: var(--fftri-red);
}

.fftri-weather-metric-icon--swim {
  color: var(--fftri-blue);
}

.fftri-weather-metric-icon--bike {
  color: var(--fftri-orange);
}

.fftri-weather-metric-icon--run {
  color: var(--fftri-teal);
}

.fftri-card-location {
  display: flex;
  align-items: center;
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-card-location-icon {
  margin-right: var(--space-1-5);
  color: var(--fftri-orange);
}

.fftri-card-value-accent {
  font-size: var(--type-heading);
  font-weight: var(--fw-extrabold);
  color: var(--fftri-result-card-accent, var(--color-brand-600));
}

.fftri-distance-card {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.fftri-distance-card--neutral {
  background: var(--color-bg-muted);
}

.fftri-distance-card--neutral-strong {
  background: var(--color-bg-darker);
}

.fftri-distance-card--neutral-border {
  border-color: var(--color-border-soft);
}

.fftri-distance-card__icon {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-20);
}

.fftri-distance-card__icon--neutral {
  color: var(--color-text-default);
}

.fftri-distance-card__icon--neutral-strong {
  color: var(--color-text-strong);
}

.fftri-document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
}

.fftri-document-item__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fftri-document-item__download {
  color: var(--color-text-muted);
  font-size: var(--type-body-sm);
}

.fftri-notification-unread-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--fftri-red);
}

.fftri-notification-icon-badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-brand-blue-10);
  color: var(--fftri-blue);
}

.fftri-license-promo {
  position: relative;
  z-index: var(--z-index-base);
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  color: var(--color-white);
  background: linear-gradient(
    90deg,
    var(--color-brand-navy-700),
    var(--color-brand-600)
  );
  box-shadow: var(--shadow-card);
}

.fftri-license-promo__content {
  position: relative;
  z-index: var(--z-index-overlay);
}

.fftri-license-promo__title {
  color: var(--color-white);
  font-size: var(--type-heading);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.fftri-license-promo__copy {
  width: 75%;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  color: var(--overlay-white-82);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-license-promo__icon {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  color: var(--overlay-white-10);
  font-size: var(--font-size-5xl);
  transform: rotate(12deg);
}

.fftri-flag-icon {
  width: 1rem;
  height: 0.75rem;
  border-radius: var(--radius-2xs);
  border: 1px solid var(--color-border-soft);
}

.fftri-rule-badge {
  padding: var(--space-0-5) var(--space-2);
}

.fftri-action-button {
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
}

.fftri-action-button:disabled,
.fftri-action-button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.fftri-list-copy {
  color: var(--color-text-muted);
  font-size: var(--type-ui);
}

.fftri-list-copy > li + li {
  margin-top: var(--space-2);
}

.fftri-pull-indicator__icon--spinning {
  animation: fftri-spin 0.8s linear infinite;
}

@keyframes fftri-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.fftri-toggle-active--sport {
  background: var(--fftri-orange);
  border-color: var(--fftri-orange);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

.fftri-trial-note-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: var(--space-0-5) var(--space-2);
  background: var(--overlay-black-30);
  color: var(--overlay-white-80);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-trial-empty-copy {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.fftri-trial-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.fftri-trial-list-row--muted {
  background: var(--color-bg-muted);
}

.fftri-trial-list-row--bordered {
  border-top: 1px solid var(--color-border-soft);
}

.fftri-trial-year {
  width: 3rem;
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
}

.fftri-trial-name {
  color: var(--color-text-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-trial-name-gap {
  margin-top: var(--space-1);
}

.fftri-trial-submeta {
  color: var(--color-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.fftri-trial-list-copy {
  min-width: 0;
  flex: 1;
}

.fftri-trial-time {
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
}

.fftri-trial-stats-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-text-default);
  font-size: var(--type-meta);
}

.fftri-trial-stats-header {
  background: var(--color-bg-muted);
}

.fftri-trial-stats-cell--strong {
  font-weight: var(--fw-bold);
  color: var(--color-text-default);
}

.fftri-trial-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--type-meta);
}

.fftri-trial-yoy-card {
  width: 100%;
  text-align: left;
  padding: var(--space-3);
}

.fftri-trial-yoy-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-trial-yoy-card__bars {
  margin-top: var(--space-3);
}

.fftri-trial-yoy-card__bars > * + * {
  margin-top: var(--space-2);
}

.fftri-weather-metrics-stack {
  margin-top: var(--space-3);
}

.fftri-weather-metrics-stack > * + * {
  margin-top: var(--space-2);
}

.fftri-trial-progress-track {
  height: 0.5rem;
  margin-top: var(--space-1);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
}

.fftri-trial-progress-fill {
  display: block;
}

.fftri-trial-progress-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fftri-trial-progress-fill--starters {
  fill: var(--fftri-blue);
}

.fftri-trial-progress-fill--classified {
  fill: var(--fftri-teal);
}

.fftri-trial-progress-fill--dnf {
  fill: var(--fftri-red);
}

.fftri-trial-media-overlay {
  background: linear-gradient(
    to right,
    var(--overlay-black-80),
    var(--overlay-ink-60),
    var(--overlay-ink-20)
  );
}

.fftri-trial-media-link {
  position: relative;
  z-index: var(--z-index-overlay);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-white);
}

.fftri-trial-media-link__chevron {
  color: var(--overlay-white-80);
  font-size: var(--type-meta);
}

.fftri-trial-like-note {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.fftri-trial-event-link {
  position: relative;
  width: 100%;
  text-align: left;
  overflow: hidden;
}

.fftri-trial-event-link__media {
  position: absolute;
  inset: 0;
}

.fftri-trial-event-link__title,
.fftri-trial-event-link__subtitle {
  margin-top: var(--space-1);
}

.trial-edition-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
}

.trial-edition-card--interactive {
  width: 100%;
  text-align: left;
}

.fftri-trial-summary-card {
  margin-top: var(--space-3);
  overflow: hidden;
}

.fftri-trial-stats-card,
.fftri-checklist-section-card {
  overflow: hidden;
}

.fftri-trial-summary-list {
  margin-top: var(--space-3);
}

.fftri-trial-summary-list > * + * {
  margin-top: var(--space-2);
}

.fftri-trial-summary-actions {
  margin-top: var(--space-4);
}

.fftri-trial-segments-grid {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3);
}

.fftri-trial-segments-grid--two,
.fftri-trial-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fftri-trial-segments-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fftri-trial-info-grid {
  display: grid;
  gap: var(--space-3);
}

.fftri-social-card {
  background: var(--fftri-blue);
  color: var(--color-white);
  border: 1px solid var(--overlay-white-15);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) ease;
}

.fftri-social-card:hover {
  opacity: 0.95;
}

.fftri-social-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--overlay-white-14);
  color: var(--color-white);
}

.fftri-account-social-link__label {
  display: block;
}

.fftri-account-social-link__copy {
  min-width: 0;
  flex: 1 1 auto;
}

.fftri-social-card__trailing {
  padding-top: var(--space-1);
}

.fftri-account-social-link__trailing {
  color: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.fftri-account-social-link__handle {
  display: block;
  margin-top: var(--space-0-5);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--color-white) 80%, transparent);
}

.fftri-account-social-link__description {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: 1rem;
  color: color-mix(in srgb, var(--color-white) 88%, transparent);
}

.fftri-reference-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fftri-reference-section {
  padding-top: var(--space-4);
  padding-bottom: var(--space-24);
}

.fftri-reference-card {
  overflow: hidden;
  border-left-width: var(--space-1-5);
  border-left-style: solid;
}

.fftri-reference-card--tintable {
  transition: background-color var(--duration-normal) ease;
}

.fftri-reference-card__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  text-align: left;
}

.fftri-reference-card__symbol {
  width: calc(var(--space-4) * 3);
  height: calc(var(--space-4) * 3);
  align-items: center;
  border-radius: var(--radius-xl);
  color: var(--color-white);
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  overflow: hidden;
}

.fftri-reference-card__symbol--image {
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fftri-reference-card__symbol .fftri-data-digit {
  color: inherit;
}

.fftri-reference-card__body {
  min-width: 0;
  flex: 1;
}

.fftri-reference-card__title {
  color: var(--color-text-strong);
  font-size: var(--type-heading);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.fftri-reference-card__title--compact {
  font-size: var(--type-body-lg);
  line-height: 1.2;
}

.fftri-reference-card__meta {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--type-body-sm);
  line-height: 1.45;
}

.fftri-reference-card__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.fftri-reference-card__metrics {
  color: var(--color-text-muted);
  font-size: var(--type-body-sm);
  line-height: 1.45;
  text-align: right;
}

.fftri-reference-card__chevron {
  color: var(--color-text-soft);
  font-size: var(--type-meta);
}

.fftri-reference-card__panel {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  background: color-mix(in srgb, var(--color-bg-muted) 82%, transparent);
}

.fftri-reference-card__panel-copy {
  color: var(--color-text-muted);
  font-size: var(--type-body-sm);
  line-height: 1.5;
}

.fftri-reference-card__panel-note {
  margin-top: var(--space-1);
  color: var(--color-text-default);
  font-size: var(--type-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.45;
}

.fftri-reference-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.fftri-distance-card-reference {
  --fftri-distance-accent: var(--color-brand-700);
  border-left: var(--space-1-5) solid var(--fftri-distance-accent);
}

[data-distance-tone="xs"],
[data-distance-tone="s"] {
  --fftri-distance-accent: var(--color-format-s);
}

[data-distance-tone="m"] {
  --fftri-distance-accent: var(--color-format-m);
}

[data-distance-tone="l"] {
  --fftri-distance-accent: var(--color-format-l);
}

[data-distance-tone="xl"],
[data-distance-tone="xxl"] {
  --fftri-distance-accent: var(--color-format-xl);
}

.fftri-distance-card__title {
  color: var(--color-ink);
  font-size: var(--type-heading-sm);
  font-weight: var(--fw-black);
  line-height: 1;
}

.fftri-distance-card__subtitle {
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--type-meta);
}

.fftri-distance-card__body {
  color: var(--color-ink-soft);
  font-size: var(--type-meta);
  line-height: 1.5;
}

.fftri-distance-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--fftri-distance-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--type-heading-sm);
  font-weight: var(--fw-black);
}

.fftri-distance-card__effort-bar {
  --fftri-distance-accent: var(--color-brand-700);
  width: 100%;
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--fftri-distance-accent);
}

.fftri-distance-card__effort-bar--level-1 {
  height: var(--space-2);
}

.fftri-distance-card__effort-bar--level-2 {
  height: var(--space-3);
}

.fftri-distance-card__effort-bar--level-3 {
  height: var(--space-4);
}

.fftri-distance-card__effort-bar--level-4 {
  height: var(--space-5);
}

.fftri-distance-card__effort-bar--level-5 {
  height: var(--space-6);
}

.fftri-distance-card__effort-bar--level-6 {
  height: calc(var(--space-6) + var(--space-1));
}

.fftri-discipline-card {
  --fftri-discipline-accent: var(--color-brand-700);
  --fftri-discipline-surface-open: transparent;
  border-left: var(--space-1-5) solid var(--fftri-discipline-accent);
}

.fftri-discipline-card[data-discipline-expanded="true"] {
  background-color: var(--fftri-discipline-surface-open);
}

[data-discipline-tone="triathlon"],
[data-discipline-tone="paratriathlon"],
[data-discipline-tone="relais"] {
  --fftri-discipline-accent: var(--color-discipline-tri);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-discipline-tri) 12%,
    transparent
  );
}

[data-discipline-tone="duathlon"] {
  --fftri-discipline-accent: var(--color-discipline-dua);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-discipline-dua) 12%,
    transparent
  );
}

[data-discipline-tone="aquathlon"],
[data-discipline-tone="swimrun"] {
  --fftri-discipline-accent: var(--color-discipline-aqt);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-discipline-aqt) 12%,
    transparent
  );
}

[data-discipline-tone="bike-run"] {
  --fftri-discipline-accent: var(--color-format-m);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-format-m) 12%,
    transparent
  );
}

[data-discipline-tone="raid"] {
  --fftri-discipline-accent: var(--color-brand-700);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-brand-700) 12%,
    transparent
  );
}

[data-discipline-tone="cross-triathlon"],
[data-discipline-tone="cross-duathlon"] {
  --fftri-discipline-accent: var(--color-discipline-cross);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-discipline-cross) 12%,
    transparent
  );
}

[data-discipline-tone="swimbike"] {
  --fftri-discipline-accent: var(--color-format-xl);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-format-xl) 12%,
    transparent
  );
}

[data-discipline-tone="triathlon-neige"] {
  --fftri-discipline-accent: var(--color-format-s);
  --fftri-discipline-surface-open: color-mix(
    in srgb,
    var(--color-format-s) 12%,
    transparent
  );
}

.fftri-discipline-card__title {
  color: var(--color-ink);
  font-size: var(--type-heading-sm);
  font-weight: var(--fw-black);
  line-height: 1.1;
}

.fftri-discipline-card__icon-wrap {
  width: 96px;
  height: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

[data-discipline-logo="triathlon"],
[data-discipline-logo="relais"] {
  background-image: url("../img/disciplines/triathlon.png");
}

[data-discipline-logo="duathlon"] {
  background-image: url("../img/disciplines/duathlon.png");
}

[data-discipline-logo="aquathlon"] {
  background-image: url("../img/disciplines/aquathlon.png");
}

[data-discipline-logo="bike-run"] {
  background-image: url("../img/disciplines/bike-run.png");
}

[data-discipline-logo="swimrun"] {
  background-image: url("../img/disciplines/swimrun.png");
}

[data-discipline-logo="raid"] {
  background-image: url("../img/disciplines/raid.png");
}

[data-discipline-logo="cross-triathlon"] {
  background-image: url("../img/disciplines/cross-triathlon.png");
}

[data-discipline-logo="cross-duathlon"] {
  background-image: url("../img/disciplines/cross-duathlon.png");
}

[data-discipline-logo="swimbike"] {
  background-image: url("../img/disciplines/swimbike.png");
}

[data-discipline-logo="paratriathlon"] {
  background-image: url("../img/disciplines/para-triathlon.png");
}

[data-discipline-logo="triathlon-neige"] {
  background-image: url("../img/disciplines/triathlon-neige.png");
}

.fftri-reference-segment-icon {
  font-size: var(--font-size-20);
}

.fftri-reference-segment-icon--swim {
  color: var(--color-brand-600);
}

.fftri-reference-segment-icon--bike {
  color: var(--color-accent-dark);
}

.fftri-reference-segment-icon--run {
  color: var(--color-brand-teal-700);
}

.fftri-reference-scale {
  margin-top: var(--space-3);
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.fftri-reference-scale__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.fftri-reference-scale__bar {
  width: 100%;
  border-radius: var(--radius-md);
}

.fftri-account-empty-state {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
  text-align: center;
}

.fftri-account-empty-state--centered {
  text-align: center;
}

.fftri-copy-top-gap {
  margin-top: var(--space-1);
}

.fftri-account-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fftri-account-meta {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.fftri-account-actions {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.fftri-account-stats-grid {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  font-size: var(--type-meta);
}

.fftri-account-section {
  padding: var(--space-5);
}

.fftri-account-section + .fftri-account-section {
  margin-top: var(--space-4);
}

.fftri-account-section--spaced {
  margin-bottom: var(--space-4);
}

.fftri-account-section--centered {
  text-align: center;
}

.fftri-account-list {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.fftri-account-race-link {
  width: 100%;
  text-align: left;
}

.fftri-account-identity-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  font-size: var(--type-meta);
}

.fftri-account-split-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.fftri-account-copy-layout {
  min-width: 0;
}

.fftri-account-copy-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-account-copy-subtitle--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fftri-account-item {
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.fftri-account-value-block {
  text-align: right;
}

.fftri-account-value {
  color: var(--ui-accent);
}

.fftri-account-link-action {
  color: var(--ui-accent);
}

.fftri-account-primary-action {
  margin-top: var(--space-4);
  width: 100%;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.fftri-account-primary-action--top {
  margin-top: 0;
}

.fftri-account-primary-action--interactive {
  font-weight: var(--fw-bold);
  transition:
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.fftri-account-primary-action--interactive:active {
  transform: scale(0.99);
}

.fftri-account-primary-action--disabled {
  font-weight: var(--fw-bold);
}

.fftri-account-settings-toggle {
  margin-top: var(--space-3);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.fftri-account-settings-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-account-settings-copy {
  margin-top: var(--space-0-5);
}

.fftri-account-social-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.fftri-account-social-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.fftri-account-chevron,
.fftri-account-external-icon {
  font-size: var(--type-meta);
}

.fftri-account-profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fftri-account-link-list {
  margin-top: var(--space-4);
}

.fftri-account-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  font-weight: var(--fw-bold);
}

.fftri-account-tab-badge {
  margin-left: var(--space-1);
  display: inline-flex;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--space-1-5);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--fftri-red);
  color: var(--color-white);
  vertical-align: middle;
}

.fftri-account-modal-shell {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-dialog);
  padding: var(--space-20) var(--space-4) 1.5rem;
}

.fftri-account-modal-card {
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}

.fftri-account-modal-actions {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.fftri-account-modal-action {
  width: 100%;
  padding-top: var(--space-2-5);
  padding-bottom: var(--space-2-5);
}

.fftri-account-modal-action--danger {
  background: var(--fftri-red);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

@media (min-width: 640px) {
  .fftri-account-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fftri-tab-button {
  flex: 0 0 auto;
  min-width: fit-content;
  padding: var(--space-2) var(--space-3);
  font-size: var(--type-meta);
  white-space: nowrap;
  background-color: transparent;
  border-width: 0;
  border-bottom: var(--space-0-5) solid transparent;
}

.fftri-tab-button--active {
  color: var(--color-brand-600);
  border-bottom-color: var(--color-brand-600);
  font-weight: var(--fw-bold);
}

.fftri-tab-button--inactive {
  color: var(--color-text-muted);
  font-weight: 600;
}

.fftri-tab-button--hover:hover {
  color: var(--color-text-strong);
}

.fftri-tab-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-brand-600);
}

[data-trial-shell] .fftri-detail-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  overflow-x: auto;
  scroll-behavior: smooth;
}

[data-trial-shell] .fftri-tab-button {
  flex: 1;
  min-width: 90px;
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: var(--type-ui);
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
  transition:
    color var(--duration-normal) ease-out,
    border-color var(--duration-normal) ease-out;
}

[data-trial-shell] .fftri-tab-button--active {
  border-bottom-color: currentColor;
}

[data-trial-shell] .fftri-tab-button--hover:hover {
  border-bottom-color: var(--color-border-soft);
}

.fftri-toggle-active {
  background: var(--color-brand-600);
  color: var(--color-white);
  border-color: var(--color-brand-600);
}

.fftri-toggle-inactive {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border-soft);
}

.fftri-toggle-inactive--ghost {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  border-color: transparent;
}

.fftri-season-button--active {
  background: var(--color-brand-600);
  color: var(--color-white);
  border-color: var(--color-brand-600);
}

.fftri-season-button--inactive {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  border-color: transparent;
}

.fftri-season-button--active-muted {
  background: var(--color-text-default);
  color: var(--color-white);
  border-color: var(--color-text-default);
}

.fftri-season-button--inactive-muted {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-color: transparent;
}

.fftri-section-title-sm {
  color: var(--color-text-strong);
  font-size: var(--type-ui);
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
}

.fftri-modal-scrim {
  background: var(--overlay-dark-shadow-45);
}

.fftri-modal-title {
  color: var(--color-text-strong);
  font-size: var(--font-size-base);
  font-weight: var(--fw-extrabold);
}

.fftri-modal-subtitle {
  margin-top: var(--space-0-5);
  color: var(--color-text-muted);
  font-size: var(--type-ui);
  line-height: 1.45;
}

.fftri-detail-date-group-label {
  margin-top: var(--space-4);
}

.fftri-detail-date-group-label--firstless:first-child {
  margin-top: 0;
}

.fftri-body-copy {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--type-ui);
  line-height: 1.6;
}

.fftri-rich-text > :first-child {
  margin-top: 0;
}

.fftri-rich-text > :last-child {
  margin-bottom: 0;
}

.fftri-rich-text p,
.fftri-rich-text ul,
.fftri-rich-text ol {
  margin: 0 0 var(--space-2);
}

.fftri-rich-text ul,
.fftri-rich-text ol {
  padding-left: var(--space-5);
}

.fftri-rich-text a {
  color: var(--fftri-blue);
  text-decoration: underline;
}

.fftri-content-stack-tight {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fftri-toggle-track {
  position: relative;
  display: inline-flex;
  width: 2.75rem;
  height: 1.5rem;
  align-items: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  transition: background var(--duration-fast) ease;
}

.fftri-toggle-thumb {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  transform: translateX(0.25rem);
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}

.fftri-toggle-track--active {
  background: var(--fftri-blue);
}

.fftri-toggle-thumb--active {
  transform: translateX(1.5rem);
}

.fftri-btn-primary {
  background: var(--fftri-blue);
  color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.fftri-btn-primary:hover {
  opacity: 0.95;
}

.fftri-btn-primary:active {
  transform: scale(0.99);
}

.fftri-btn-primary:disabled,
.fftri-btn-primary[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.fftri-season-plan-confirm {
  padding: var(--space-3) var(--space-4);
}

.fftri-card-segment {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}

.fftri-segment-block {
  align-items: flex-start;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--segment-radius);
  box-shadow: var(--shadow-soft);
  display: flex;
  gap: var(--space-3);
  padding: var(--segment-pad-y) var(--segment-pad-x);
}

.fftri-segment-block__body {
  min-width: 0;
}

.fftri-segment-block__icon {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  height: var(--segment-icon-size);
  justify-content: center;
  width: var(--segment-icon-size);
}

.fftri-segment-block__label {
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fftri-segment-block__value {
  color: var(--color-text-default);
  font-size: var(--type-body-sm);
  font-weight: 500;
  margin-top: var(--space-1);
}

.fftri-organizer-avatar--default {
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.fftri-glass-btn {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--color-white);
  backdrop-filter: blur(6px);
  transition:
    background var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease;
}

.fftri-glass-btn:hover {
  background: var(--glass-bg-hover);
}

.fftri-glass-btn:active {
  transform: scale(0.97);
}

.fftri-glass-btn:disabled,
.fftri-glass-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.fftri-glass-btn--circle {
  border-radius: var(--radius-full);
}

.fftri-glass-btn--soft {
  background: var(--overlay-white-70);
  border-color: var(--overlay-white-60);
  color: var(--fftri-blue);
  box-shadow: var(--shadow-soft);
}

.fftri-glass-btn--soft:hover {
  background: var(--overlay-white-80);
}

.fftri-glass-btn--disabled {
  background: var(--overlay-white-40);
  border-color: var(--glass-border-strong);
  color: var(--overlay-brand-blue-70);
  cursor: not-allowed;
}

.fftri-glass-chip {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-hover);
  color: var(--color-white);
  backdrop-filter: blur(6px);
}

.fftri-countdown-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--type-meta);
  font-weight: var(--fw-extrabold);
}

.fftri-countdown-chip--pulse {
  animation: fftri-pulse-soft 1.5s ease-in-out infinite;
}

@keyframes fftri-pulse-soft {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.72;
  }
}

.fftri-glass-icon {
  border: 1px solid var(--glass-border);
  background: var(--overlay-white-12);
  backdrop-filter: blur(6px);
}

.fftri-glass-progress-track {
  background: var(--glass-bg-hover);
}

.fftri-hero-media-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fftri-hero-media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--overlay-black-80),
    var(--overlay-dark-20),
    transparent
  );
}

.fftri-hero-heading {
  color: var(--color-white);
  font-size: var(--type-heading-lg);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  text-shadow: 0 1px 3px var(--overlay-dark-40);
}

.fftri-hero-heading--heavy {
}

.fftri-hero-kicker {
  color: var(--c-white-70);
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-hero-meta,
.fftri-hero-detail-meta {
  color: var(--c-white-80);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--type-body-sm);
  font-weight: 500;
  line-height: 1.4;
}

.fftri-hero-meta--icon-row,
.fftri-hero-detail-meta {
  gap: var(--space-3);
}

.fftri-detail-hero-body {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  color: var(--color-white);
}

.fftri-detail-hero-body--inline {
  position: relative;
  z-index: var(--z-index-overlay);
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.fftri-club-hero-body {
  padding-top: calc(var(--space-3) + var(--tap-target));
}

.fftri-detail-hero--club {
  padding-bottom: var(--space-5);
}

.fftri-club-detail-hero-body {
  position: relative;
  z-index: var(--z-index-overlay);
}

.fftri-club-detail-hero-footer {
  margin-top: var(--space-3);
  position: relative;
  z-index: var(--z-index-overlay);
}

.fftri-detail-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.fftri-detail-hero-badges--lg {
  margin-bottom: var(--space-3);
}

.fftri-detail-hero-badges--lg .fftri-badge {
  box-shadow: var(--shadow-soft);
}

.fftri-detail-hero-badges--lg .fftri-badge--solid[data-tone] {
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--fftri-badge-tone) 72%, transparent);
  background: var(--fftri-badge-tone);
}

.fftri-detail-hero-badges--lg .fftri-badge[data-tone]:not(.fftri-badge--solid) {
  color: var(--fftri-badge-tone);
  border-color: color-mix(
    in srgb,
    var(--fftri-badge-tone) 42%,
    var(--color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--fftri-badge-tone) 16%,
    var(--color-bg-surface)
  );
}

.fftri-detail-hero-badges--lg .fftri-badge--muted {
  color: var(--color-brand-700);
  border-color: color-mix(
    in srgb,
    var(--color-border-strong) 55%,
    transparent
  );
  background: var(--color-bg);
}

[data-theme="dark"] .fftri-detail-hero-badges--lg .fftri-badge[data-tone]:not(.fftri-badge--solid) {
  border-color: color-mix(
    in srgb,
    var(--fftri-badge-tone) 44%,
    var(--overlay-white-18)
  );
  background: color-mix(
    in srgb,
    var(--fftri-badge-tone) 18%,
    var(--overlay-white-10)
  );
}

[data-theme="dark"] .fftri-detail-hero-badges--lg .fftri-badge--muted {
  color: var(--color-brand-700);
  border-color: color-mix(
    in srgb,
    var(--color-brand-600) 26%,
    var(--overlay-white-38)
  );
  background: var(--overlay-white-92);
}

.fftri-detail-hero-stats {
  margin: var(--space-4) 1.25rem 0;
}

.fftri-pull-indicator {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--fftri-blue);
  background: var(--overlay-white-90);
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fftri-pull-indicator-wrap {
  left: 50%;
  pointer-events: none;
  position: fixed;
  top: var(--space-16);
  transform: translateX(-50%);
  z-index: var(--z-nav);
}

.fftri-pull-indicator-host {
  opacity: 0;
  transition: opacity var(--duration-fast) ease;
}

.fftri-pull-indicator-host--visible {
  opacity: 1;
}

.fftri-pull-indicator__icon--ready {
  color: var(--color-success);
}

.fftri-pull-indicator__icon--busy {
  color: var(--fftri-blue);
}

.rk-card,
.fftri-rank-card,
.stat-card,
.fftri-stat-card,
.last-race,
.fftri-last-race,
.distance-card,
.fftri-user-distance-card,
.notif-group,
.fftri-notif-group {
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}

.fftri-metric-card {
  background: linear-gradient(
    135deg,
    var(--metric-card-bg-start),
    var(--metric-card-bg-end)
  );
  border: 1px solid var(--metric-card-border);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .fftri-metric-card {
  --metric-card-bg-start: color-mix(
    in srgb,
    var(--fftri-blue) 15%,
    var(--color-dark-surface)
  );
  --metric-card-bg-end: color-mix(
    in srgb,
    var(--fftri-teal) 12%,
    var(--color-dark-surface)
  );
  --metric-card-border: color-mix(
    in srgb,
    var(--fftri-blue) 20%,
    transparent
  );
}

.fftri-rank {
  border: 1px solid color-mix(in srgb, var(--fftri-blue) 20%, transparent);
  background: var(--color-bg-light);
  color: var(--fftri-blue);
}

.fftri-rank-circle {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--type-meta);
  font-weight: var(--fw-extrabold);
}

.fftri-rank[data-rank-tone="1"] {
  border-color: var(--rank1);
  color: var(--rank1);
}

.fftri-rank[data-rank-tone="2"] {
  border-color: var(--rank2);
  color: var(--rank2);
}

.fftri-rank[data-rank-tone="3"] {
  border-color: var(--rank3);
  color: var(--rank3);
}

.fftri-detail-page,
.users-page {
  background: var(--color-bg-light);
}

.stats-bar {
  align-items: center;
  background: linear-gradient(
    135deg,
    var(--color-brand-blue-deep) 0%,
    var(--color-primary) 100%
  );
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-blue);
  display: flex;
  justify-content: space-between;
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-3) var(--space-5);
}

.stats-bar__number {
  color: var(--color-white);
  display: block;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-feature-settings: "tnum";
  font-size: var(--type-hero);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-black);
  line-height: 1;
}

.stats-bar__label {
  color: var(--c-white-70);
  display: block;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  margin-top: var(--space-1);
}

.stats-bar__badge {
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1-5) var(--space-3);
  text-align: right;
}

.stats-bar__badge--logo img {
  max-height: 3em;
  width: auto;
  display: block;
}

.stats-bar__badge-label {
  color: var(--color-rank-gold);
  display: block;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.stats-bar__badge-sub {
  color: var(--c-white-70);
  display: block;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-caption);
  margin-top: 1px;
}

.user-detail-page {
  background: var(--color-bg-light);
}

.user-card--interactive {
  width: 100%;
  text-align: left;
}

.hero {
  background: var(--gradient-screen-accent, var(--gradient-fftri-blue));
  padding-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}

.fftri-auto-hide-hero-slot {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows var(--duration-slow) ease;
}

.fftri-auto-hide-hero-slot > [data-auto-hide-hero] {
  min-height: 0;
  transform: translateY(0);
  transition: transform var(--duration-slow) ease;
}

.fftri-auto-hide-hero-slot--collapsed {
  grid-template-rows: 0fr;
}

.fftri-auto-hide-hero-slot--collapsed > [data-auto-hide-hero] {
  transform: translateY(-20px);
  pointer-events: none;
}

[data-reduced-motion="true"] .fftri-auto-hide-hero-slot,
[data-reduced-motion="true"] .fftri-auto-hide-hero-slot > [data-auto-hide-hero],
[data-reduced-motion="true"] .fftri-screen-topbar--sticky {
  transition: none;
}

.hero-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.h2h-slot__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: var(--radius-circle);
  background: var(--overlay-white-06);
}

.hero::after {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-circle);
  background: var(--overlay-brand-orange-10);
}

.hero-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4-5) var(--space-5);
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.hero-back--overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-hero-chrome);
  padding: var(--space-3) var(--space-4-5) 0;
}

.hero-back:active {
  transform: scale(0.95);
}

.hero-back__button {
  padding: 0;
  border: 0;
  background: transparent;
}

.hero-back-circle {
  width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  border-radius: var(--radius-circle);
  border: 1px solid var(--overlay-white-30);
  background: var(--overlay-white-16);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-back-circle i {
  color: var(--color-text-strong);
}

.hero-back-label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-body-sm);
  font-weight: 600;
  line-height: 1.25;
  white-space: pre-line;
  color: var(--overlay-white-75);
}

.hero-profile {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.hero-avatar {
  width: 84px;
  height: 84px;
  border-radius: var(--radius-4xl);
  border: 3px solid var(--overlay-white-35);
  backdrop-filter: blur(8px);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fftri-avatar-bg, transparent);
  color: var(--fftri-avatar-fg, inherit);
}

.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-avatar__initials {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-28);
  font-weight: var(--fw-black);
}

.hero-identity {
  min-width: 0;
}

.hero-name,
.fftri-hero-name {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-34);
  font-weight: var(--fw-black);
  color: var(--color-white);
  line-height: 1;
}

.hero-name em,
.fftri-hero-name em {
  font-style: normal;
  color: var(--rank1);
}

.hero-badges,
.fftri-hero-badges {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.hero-badge,
.fftri-hero-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-3xl);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-badge--serie,
.fftri-hero-badge--serie {
  background: var(--color-accent);
  color: var(--color-white);
}

.hero-badge--rk,
.fftri-hero-badge--rk {
  background: var(--overlay-white-18);
  border: 1px solid var(--overlay-white-25);
  color: var(--color-white);
}

.rk-card,
.fftri-rank-card {
  margin: -20px 18px 0;
  background: var(--color-bg);
  border-radius: var(--radius-3xl);
  padding: var(--space-4-5) 20px;
  box-shadow: 0 8px 32px var(--overlay-brand-blue-18);
  position: relative;
  z-index: var(--z-index-overlay);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.rk-card__label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--color-contrast-medium);
}

.rk-card__title {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-28);
  font-weight: var(--fw-black);
  color: var(--color-contrast-higher);
  line-height: 1;
  margin-top: var(--space-0-5);
}

.rk-card__meta {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--color-contrast-medium);
  margin-top: var(--space-1);
}

.rk-card__score-wrap {
  text-align: right;
}

.rk-card__score {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-42);
  font-weight: var(--fw-black);
  color: var(--color-accent);
  line-height: 1;
}

.rk-card__score-label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-caption);
  font-weight: var(--fw-bold);
  color: var(--color-contrast-medium);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.rk-card__divider {
  margin-top: var(--space-3-5);
  padding-top: var(--space-3-5);
  border-top: 1px solid var(--color-bg-dark);
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  width: 100%;
}

.rk-percentile-label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  color: var(--color-contrast-medium);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.rk-percentile-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-light);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.rk-percentile-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand-blue-deep);
  font-size: 0;
  line-height: 0;
}

.fftri-detail-page-shell {
  position: relative;
}

.fftri-detail-view-hero {
  position: relative;
}

.fftri-detail-cancelled-stripe {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: calc(var(--space-1) + 2px);
}

.fftri-card--clip {
  overflow: hidden;
}

.last-race__date-icon {
  margin-right: var(--space-1);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2-5);
}

.stat-card,
.fftri-stat-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-3-5) 16px 16px;
  box-shadow: 0 2px 10px var(--overlay-dark-05);
  position: relative;
  overflow: hidden;
}

.stat-card::before,
.fftri-stat-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand-blue-light), var(--color-brand-blue-deep));
  opacity: 0;
  transition: opacity var(--duration-normal);
}

.stat-card:hover::before,
.fftri-stat-card:hover::before {
  opacity: 1;
}

.stat-card--featured,
.fftri-stat-card--featured {
  background: linear-gradient(135deg, var(--color-brand-blue-deep) 0%, var(--color-primary) 100%);
  box-shadow: var(--shadow-blue);
}

.stat-card--featured .stat-label,
.fftri-stat-card--featured .stat-label {
  color: var(--overlay-white-65);
}

.stat-card--featured .stat-value,
.fftri-stat-card--featured .stat-value {
  color: var(--color-white);
}

.stat-card--featured .stat-sub,
.fftri-stat-card--featured .stat-sub {
  color: var(--overlay-white-55);
}

.stat-label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-9);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-contrast-medium);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-36);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-contrast-higher);
}

.stat-value--accent {
  color: var(--color-accent);
}

.stat-value--blue {
  color: var(--color-brand-blue-deep);
}

.stat-value--muted {
  color: var(--color-contrast-medium);
  font-size: var(--font-size-28);
}

.stat-sub {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  color: var(--color-contrast-medium);
  margin-top: var(--space-1);
}

.stat-icon {
  position: absolute;
  right: var(--space-3);
  top: var(--space-3);
  font-size: var(--font-size-20);
  opacity: 0.18;
  pointer-events: none;
}

.last-race,
.fftri-last-race {
  background: var(--color-bg);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 2px 10px var(--overlay-dark-05);
}

.last-race__header {
  background: linear-gradient(
    135deg,
    var(--color-contrast-higher) 0%,
    var(--color-brand-navy) 100%
  );
  padding: var(--space-3-5) var(--space-4-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.last-race__label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-caption);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--overlay-white-55);
  display: block;
}

.last-race__name {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--fw-black);
  color: var(--color-white);
  margin-top: var(--space-0-5);
}

.last-race__rank-badge {
  background: var(--color-accent);
  color: var(--color-white);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-22);
  font-weight: var(--fw-black);
  padding: var(--space-1-5) calc(var(--space-3) + var(--space-0-5));
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.last-race__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: var(--space-3-5) var(--space-4-5);
}

.last-race__stat {
  text-align: center;
}

.last-race__val {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--fw-black);
  color: var(--color-contrast-higher);
  display: block;
}

.last-race__val--blue {
  color: var(--color-brand-blue-deep);
}

.last-race__lbl {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-9);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-contrast-medium);
  display: block;
  margin-top: var(--space-0-5);
}

.last-race__date {
  padding: 0 var(--space-4-5) var(--space-3-5);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  color: var(--color-contrast-medium);
  font-weight: 500;
}

.distance-card,
.fftri-user-distance-card {
  background: var(--color-bg);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 2px 10px var(--overlay-dark-05);
}

.distance-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3-5) var(--space-4-5) var(--space-3);
  border-bottom: 1px solid var(--color-bg-dark);
}

.distance-card__letter {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-28);
  font-weight: var(--fw-black);
  color: var(--color-brand-blue-deep);
  line-height: 1;
}

.distance-card__full-name {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--color-contrast-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.distance-card__count {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
  color: var(--color-contrast-medium);
  background: var(--color-bg-light);
  padding: var(--space-1) 10px;
  border-radius: var(--radius-3xl);
}

.distance-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.distance-card__stat {
  padding: var(--space-3-5) 16px;
  text-align: center;
  border-right: 1px solid var(--color-bg-dark);
}

.distance-card__stat:last-child {
  border-right: none;
}

.distance-card__val {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-20);
  font-weight: var(--fw-black);
  color: var(--color-contrast-higher);
  line-height: 1;
  display: block;
}

.distance-card__val--blue {
  color: var(--color-brand-blue-deep);
}

.distance-card__lbl {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-9);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-contrast-medium);
  margin-top: var(--space-0-75);
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-in {
  animation: fadeUp var(--duration-normal) ease both;
}

.anim-in:nth-child(1) {
  animation-delay: 0.05s;
}

.anim-in:nth-child(2) {
  animation-delay: 0.1s;
}

.anim-in:nth-child(3) {
  animation-delay: var(--duration-fast);
}

.anim-in:nth-child(4) {
  animation-delay: var(--duration-normal);
}

.anim-in:nth-child(5) {
  animation-delay: 0.25s;
}

.anim-in:nth-child(6) {
  animation-delay: 0.3s;
}

.anim-in:nth-child(7) {
  animation-delay: 0.35s;
}

.anim-in:nth-child(8) {
  animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .anim-in {
    animation: none;
  }
  .rk-percentile-fill {
    transition: none;
  }
  .stat-card::before {
    transition: none;
  }
  .result-row {
    transition: none;
  }
  .fftri-skeleton::after {
    animation: none;
  }
  .nav-item i,
  .nav-item span,
  .nav-item::after,
  .fftri-screen-topbar--sticky,
  .fftri-back-to-top {
    transition: none;
  }
  .fftri-club-marker__pin {
    animation: none;
  }
  .fftri-view-transition {
    animation: none;
  }
}

/* Skeletons */
.fftri-status-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fftri-status-loader .fftri-skeleton-line--lg {
  width: 180px;
  height: 10px;
}

.fftri-status-loader .fftri-skeleton-line--sm {
  width: 110px;
  height: 10px;
}

.fftri-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-skeleton-base);
  border-radius: var(--radius-sm);
}

.fftri-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--overlay-white-55),
    transparent
  );
  animation: fftri-skeleton-shimmer 1.2s infinite;
}

.fftri-skeleton-card {
  background: var(--color-skeleton-surface);
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-3);
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 10px var(--overlay-ink-04);
}

.fftri-skeleton-card + .fftri-skeleton-card {
  margin-top: var(--space-3);
}

.fftri-card-list .fftri-skeleton-card + .fftri-skeleton-card {
  margin-top: 0;
}

.fftri-skeleton-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fftri-skeleton-card__body {
  flex: 1;
  min-width: 0;
  width: 100%;
}

.fftri-skeleton-media {
  width: 100%;
  height: 112px;
  border-radius: var(--radius-sm);
}

.fftri-skeleton-avatar {
  width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.fftri-skeleton-date {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.fftri-skeleton-line {
  display: block;
  height: 12px;
}

.fftri-skeleton-line + .fftri-skeleton-line {
  margin-top: var(--space-2);
}

.fftri-skeleton-line--spaced {
  margin-top: var(--space-3);
}

.fftri-skeleton-line--compact-spaced {
  margin-top: var(--space-2);
}

.fftri-skeleton-line--lg {
  width: 78%;
}

.fftri-skeleton-line--md {
  width: 56%;
}

.fftri-skeleton-line--sm {
  width: 34%;
}

.fftri-skeleton-card--compact .fftri-skeleton-line--lg {
  width: 70%;
}

.fftri-skeleton-card--compact .fftri-skeleton-line--md {
  width: 52%;
}

.fftri-skeleton-card--media {
  min-height: 188px;
}

.fftri-skeleton-card--compact {
  min-height: 80px;
}

.fftri-skeleton-card--panel {
  min-height: 72px;
}

.fftri-skeleton-card--filter {
  padding: var(--space-3);
}

.fftri-skeleton-card--detail-header {
  padding: var(--space-4);
}

.fftri-skeleton-card--challenge-header {
  padding: var(--space-4);
}

.fftri-skeleton-card--results-panel {
  min-height: 96px;
}

.fftri-view-loading-status {
  padding-top: var(--space-1);
}

@keyframes fftri-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (pointer: coarse) {
  button:not(.tag):not(.fftri-badge):not(.fftri-pill),
  [role="button"]:not(.tag):not(.fftri-badge):not(.fftri-pill),
  input,
  select,
  textarea {
    min-height: 48px;
  }

  button:not(.tag):not(.fftri-badge):not(.fftri-pill),
  [role="button"]:not(.tag):not(.fftri-badge):not(.fftri-pill) {
    min-width: 48px;
  }
}

.text-slate-400 {
  color: var(--color-contrast-medium);
}

.text-slate-500 {
  color: var(--color-contrast-high);
}

/* Semantic typography helpers */
.fftri-text-overline {
  font-size: var(--type-caption) !important;
}

.fftri-challenge-podium-head__accent {
  font-weight: var(--fw-bold);
}

.fftri-text-label {
  font-size: var(--type-label) !important;
}

.fftri-text-meta {
  font-size: var(--type-meta) !important;
}

.h2h-status-count {
  color: var(--color-text-muted);
  font-weight: 600;
}

.h2h-status {
  text-align: center;
}

.fftri-h2h-muted,
.h2h-muted {
  color: var(--color-text-soft);
}

/* Typographic utility alignment */
.text-xs {
  font-size: var(--font-size-xs) !important;
}

.text-sm {
  font-size: var(--font-size-sm) !important;
}

.text-base {
  font-size: var(--font-size-base) !important;
}

.text-lg {
  font-size: var(--font-size-lg) !important;
}

.text-xl {
  font-size: var(--font-size-xl) !important;
}

.text-2xl {
  font-size: var(--font-size-2xl) !important;
}

.text-\[9px\] {
  font-size: var(--font-size-9) !important;
}

.text-\[10px\] {
  font-size: var(--font-size-10) !important;
}

.text-\[11px\] {
  font-size: var(--font-size-11) !important;
}

.text-\[12px\] {
  font-size: var(--font-size-12) !important;
}

.text-\[13px\] {
  font-size: var(--font-size-13) !important;
}

.text-\[15px\] {
  font-size: var(--font-size-15) !important;
}

.text-\[16px\] {
  font-size: var(--font-size-16) !important;
}

.text-\[17px\] {
  font-size: var(--font-size-17) !important;
}

.text-\[18px\] {
  font-size: var(--font-size-18) !important;
}

.text-\[20px\] {
  font-size: var(--font-size-20) !important;
}

.text-\[22px\] {
  font-size: var(--font-size-22) !important;
}

.text-\[24px\] {
  font-size: var(--font-size-24) !important;
}

.text-\[28px\] {
  font-size: var(--font-size-28) !important;
}

.text-\[30px\] {
  font-size: var(--font-size-30) !important;
}

.text-\[34px\] {
  font-size: var(--font-size-34) !important;
}

.text-\[36px\] {
  font-size: var(--font-size-36) !important;
}

.text-\[42px\] {
  font-size: var(--font-size-42) !important;
}

/* Gestion des zones d'évitement (encoches/barres système) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   Dark mode overrides
   Grouped by component. Components with their own [data-theme]
   blocks appear immediately after their light-mode rules above;
   shell-level and global overrides live here at the end.
   ============================================================ */

/* ── Global tokens & body ──────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-surface: var(--color-dark-surface);
  --color-border-soft: var(--color-dark-border);
  --ui-accent: var(--color-dark-info-strong);
}

[data-theme="dark"] body {
  background-color: var(--color-dark-bg);
  color: var(--color-dark-text);
}

[data-theme="dark"] .bg-white {
  background-color: var(--color-dark-surface) !important;
}

/* ── Shell: topbar & filter panel ──────────────────────────── */
[data-theme="dark"] .fftri-screen-topbar {
  background-color: var(--overlay-dark-surface-90) !important;
  border-color: var(--color-dark-border) !important;
}

[data-theme="dark"] .fftri-filter-panel {
  background: var(--color-dark-elevated);
}

[data-theme="dark"] .fftri-filter-panel__title {
  color: var(--color-dark-text-muted);
}

/* ── Icon button ───────────────────────────────────────────── */
[data-theme="dark"] .fftri-icon-btn {
  background: var(--color-dark-surface);
}

[data-theme="dark"] .fftri-icon-btn:hover {
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--color-dark-surface));
}

/* ── Card ──────────────────────────────────────────────────── */
[data-theme="dark"] .fftri-card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-card-muted,
[data-theme="dark"] .fftri-card-panel-muted {
  background: var(--color-dark-elevated);
  border-color: var(--color-dark-border);
}

/* ── Badge ─────────────────────────────────────────────────── */
[data-theme="dark"] .fftri-badge--muted {
  background: var(--color-dark-elevated);
  color: var(--color-dark-text);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-badge--info {
  background: var(--color-dark-info-bg);
  color: var(--color-dark-info-strong);
  border-color: color-mix(in srgb, var(--color-dark-info) 30%, transparent);
}

[data-theme="dark"] .fftri-badge--success {
  background: var(--color-dark-success-bg);
  color: var(--color-dark-success);
  border-color: color-mix(in srgb, var(--color-dark-success) 30%, transparent);
}

[data-theme="dark"] .fftri-badge--warning {
  background: var(--color-dark-warning-bg);
  color: var(--color-dark-warning);
  border-color: color-mix(in srgb, var(--color-dark-warning) 30%, transparent);
}

[data-theme="dark"] .fftri-badge--danger {
  background: var(--color-dark-danger-bg);
  color: var(--color-dark-danger);
  border-color: color-mix(in srgb, var(--color-dark-danger) 30%, transparent);
}

/* ── Pill ──────────────────────────────────────────────────── */
[data-theme="dark"] .fftri-pill--inactive {
  background: var(--color-dark-elevated);
  border-color: var(--color-dark-border);
  color: var(--color-dark-text-muted);
}

/* ── Discipline segments ────────────────────────────────────── */
/* swim + canoe share the blue palette */
[data-theme="dark"] .fftri-segment--swim,
[data-theme="dark"] .fftri-segment--canoe {
  background: color-mix(in srgb, var(--fftri-blue) 15%, var(--color-dark-surface));
  border-color: color-mix(in srgb, var(--fftri-blue) 25%, transparent);
}

[data-theme="dark"] .fftri-segment--ski {
  background: color-mix(
    in srgb,
    var(--fftri-blue) 12%,
    var(--fftri-teal) 12%,
    var(--color-dark-surface)
  );
  border-color: color-mix(
    in srgb,
    var(--fftri-blue) 22%,
    var(--fftri-teal) 22%,
    transparent
  );
}

/* bike + trail share the orange palette */
[data-theme="dark"] .fftri-segment--bike,
[data-theme="dark"] .fftri-segment--trail {
  background: color-mix(in srgb, var(--fftri-orange) 15%, var(--color-dark-surface));
  border-color: color-mix(in srgb, var(--fftri-orange) 25%, transparent);
}

/* run + vtt share the teal palette */
[data-theme="dark"] .fftri-segment--run,
[data-theme="dark"] .fftri-segment--vtt {
  background: color-mix(in srgb, var(--fftri-teal) 15%, var(--color-dark-surface));
  border-color: color-mix(in srgb, var(--fftri-teal) 25%, transparent);
}

/* ── Data display ───────────────────────────────────────────── */
[data-theme="dark"] .fftri-data-digit {
  color: var(--color-dark-text-strong);
}

[data-theme="dark"] .fftri-data-time {
  color: var(--color-dark-text);
}

[data-theme="dark"] .fftri-data-time--strong {
  color: var(--color-dark-text-strong);
}

/* ── Legacy utility overrides ───────────────────────────────── */
[data-theme="dark"] .bg-slate-50 {
  background-color: var(--color-dark-elevated) !important;
}

[data-theme="dark"] .bg-slate-100 {
  background-color: var(--color-dark-bg) !important;
}

[data-theme="dark"] .text-slate-800 {
  color: var(--color-dark-text) !important;
}

[data-theme="dark"] .text-slate-700 {
  color: var(--color-dark-text-strong) !important;
}

[data-theme="dark"] .text-slate-600 {
  color: var(--color-dark-text-soft) !important;
}

[data-theme="dark"] .text-slate-500 {
  color: var(--color-dark-text-muted) !important;
}

[data-theme="dark"] .text-slate-400 {
  color: var(--color-dark-text-muted) !important;
}

[data-theme="dark"] .border-slate-100 {
  border-color: var(--color-dark-border) !important;
}

[data-theme="dark"] .border-slate-200 {
  border-color: var(--color-dark-border) !important;
}

[data-theme="dark"] .border-slate-300 {
  border-color: var(--color-dark-border-strong) !important;
}

/* ── Navigation & shell chrome ──────────────────────────────── */
[data-theme="dark"] .nav-item[aria-current="page"]::after {
  background: var(--tab-accent-current);
}

[data-theme="dark"] .fftri-screen-topbar--sticky {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--screen-accent) 12%, var(--overlay-dark-surface-94)) 0%,
    var(--overlay-dark-surface-90) 100%
  );
  border-top-color: color-mix(
    in srgb,
    var(--screen-accent) 90%,
    transparent
  );
  border-bottom-color: color-mix(
    in srgb,
    var(--screen-accent) 22%,
    var(--color-dark-border)
  );
}

[data-theme="dark"] .app-shell-header {
  border-bottom-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-back-to-top {
  background: var(--color-dark-hero-mid);
  border-color: var(--color-dark-border-strong);
  color: var(--color-dark-text);
}

[data-theme="dark"] .fftri-back-to-top:hover {
  background: var(--color-dark-featured-end);
}

/* ── Weather widget ─────────────────────────────────────────── */
[data-theme="dark"] .fftri-weather-condition-badge--unknown {
  background: var(--color-dark-elevated);
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .fftri-card.fftri-card-muted.fftri-weather-card {
  background: var(--color-dark-elevated);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-weather-row__label,
[data-theme="dark"] .fftri-weather-card__grid,
[data-theme="dark"] .fftri-weather-copy,
[data-theme="dark"] .fftri-weather-title {
  color: var(--color-dark-text);
}

[data-theme="dark"] .fftri-weather-row__value,
[data-theme="dark"] .fftri-weather-label,
[data-theme="dark"] .fftri-weather-kicker,
[data-theme="dark"] .fftri-weather-footer,
[data-theme="dark"] .fftri-weather-copy--muted,
[data-theme="dark"] .fftri-weather-aqi-neutral,
[data-theme="dark"] .fftri-weather-meta-icon {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .fftri-weather-code {
  color: var(--color-dark-text-faint);
}

/* ── User & detail pages ────────────────────────────────────── */
[data-theme="dark"] .fftri-detail-page,
[data-theme="dark"] .fftri-users-page,
[data-theme="dark"] .users-page,
[data-theme="dark"] .user-detail-page {
  background: var(--color-dark-bg);
}

/* ── Empty state & podium ───────────────────────────────────── */
[data-theme="dark"] .fftri-podium-title,
[data-theme="dark"] .podium-title {
  color: var(--color-dark-text);
}

[data-theme="dark"] .fftri-empty-state {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-empty-state__art {
  color: var(--color-dark-info-strong);
}

[data-theme="dark"] .podium__card {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 8px 24px var(--overlay-dark-shadow-35);
}

[data-theme="dark"] .podium__name {
  color: var(--color-dark-text);
}

[data-theme="dark"] .podium__score {
  color: var(--color-dark-info-strong);
}

[data-theme="dark"] .podium__card--rank1 .podium__score {
  color: var(--color-dark-warning);
}

[data-theme="dark"] .podium__score-label {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .podium__category {
  background: var(--color-dark-info-bg);
  color: var(--color-dark-info);
}

[data-theme="dark"] .podium__card--rank1 .podium__category {
  background: var(--color-dark-warning-bg);
  color: var(--color-dark-warning);
}

[data-theme="dark"] .podium__private {
  color: var(--color-dark-danger);
  background: var(--color-dark-danger-bg);
}

/* ── User card list ─────────────────────────────────────────── */
[data-theme="dark"] .user-card {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 8px 24px var(--overlay-dark-shadow-30);
}

[data-theme="dark"] .user-card__rank,
[data-theme="dark"] .user-card__club,
[data-theme="dark"] .user-card__score-label {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .user-card__name {
  color: var(--color-dark-text);
}

[data-theme="dark"] .user-card__score {
  color: var(--color-dark-info-strong);
}

[data-theme="dark"] .user-card .tag--category {
  background: var(--color-dark-info-bg);
  color: var(--color-dark-info);
}

[data-theme="dark"] .user-card .tag--serie {
  background: var(--color-dark-warning-bg);
  color: var(--color-dark-warning);
}

[data-theme="dark"] .user-card .tag--rank {
  background: var(--color-dark-success-bg);
  color: var(--color-dark-success);
}

[data-theme="dark"] .user-card .tag--private {
  color: var(--color-dark-danger);
  background: var(--color-dark-danger-bg);
}

[data-theme="dark"] .fftri-user-card__private-inline {
  color: var(--color-dark-danger);
  background: var(--color-dark-danger-bg);
}

[data-theme="dark"] .user-card__score-bar {
  background: var(--color-dark-border);
}

[data-theme="dark"] .user-card__score-fill {
  fill: var(--color-dark-accent-cyan);
}

[data-theme="dark"] .user-card__arrow {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .user-card--private {
  background: var(--color-dark-elevated);
  border-color: var(--color-dark-border-strong);
  opacity: 0.9;
}

/* ── Hero banner ────────────────────────────────────────────── */
[data-theme="dark"] .hero {
  background: var(
    --gradient-screen-accent-dark,
    linear-gradient(
      160deg,
      var(--color-dark-hero-start) 0%,
      var(--color-dark-hero-mid) 55%,
      var(--color-dark-hero-end) 100%
    )
  );
}

[data-theme="dark"] .hero-back-circle {
  background: var(--overlay-dark-overlay-14);
}

[data-theme="dark"] .hero-back-label {
  color: var(--overlay-dark-text-80);
}

[data-theme="dark"] .hero-avatar {
  border-color: var(--overlay-dark-overlay-28);
}

[data-theme="dark"] .fftri-hero-meta,
[data-theme="dark"] .fftri-hero-detail-meta {
  color: var(--overlay-dark-text-72);
}

[data-theme="dark"] .fftri-event-gradient {
  background: linear-gradient(
    90deg,
    var(--overlay-dark-navy-72) 0%,
    var(--overlay-dark-hero-mid-58) 55%,
    var(--overlay-dark-hero-end-46) 100%
  );
}

[data-theme="dark"] .fftri-distance-card__title,
[data-theme="dark"] .fftri-discipline-card__title {
  color: var(--color-ink);
}

[data-theme="dark"] .fftri-event-card__placeholder {
  background: var(--color-bg-subtle);
}

[data-theme="dark"] .fftri-event-card__mesh {
  background-image: radial-gradient(var(--overlay-white-08) 1px, transparent 1px);
}

[data-theme="dark"] .fftri-event-card__date-pane {
  background: var(--overlay-black-45);
  border-color: var(--overlay-white-10);
}

/* ── Ranking & stats cards ──────────────────────────────────── */
[data-theme="dark"] .rk-card,
[data-theme="dark"] .fftri-rank-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .fftri-stat-card,
[data-theme="dark"] .last-race,
[data-theme="dark"] .fftri-last-race,
[data-theme="dark"] .distance-card,
[data-theme="dark"] .fftri-user-distance-card {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 10px 24px var(--overlay-dark-shadow-32);
}

[data-theme="dark"] .results-card {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  box-shadow: 0 10px 24px var(--overlay-dark-shadow-32);
}

[data-theme="dark"] .rk-card__label,
[data-theme="dark"] .rk-card__meta,
[data-theme="dark"] .rk-card__score-label,
[data-theme="dark"] .rk-percentile-label,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .stat-sub,
[data-theme="dark"] .last-race__lbl,
[data-theme="dark"] .last-race__date,
[data-theme="dark"] .results-table__head span,
[data-theme="dark"] .result-date,
[data-theme="dark"] .distance-card__full-name,
[data-theme="dark"] .distance-card__count,
[data-theme="dark"] .distance-card__lbl {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .rk-card__title,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .last-race__val,
[data-theme="dark"] .result-rank,
[data-theme="dark"] .fftri-result-rank,
[data-theme="dark"] .result-name,
[data-theme="dark"] .fftri-result-name,
[data-theme="dark"] .result-time,
[data-theme="dark"] .distance-card__val {
  color: var(--color-dark-text);
}

[data-theme="dark"] .rk-card__divider {
  border-top-color: var(--color-dark-border);
}

[data-theme="dark"] .rk-percentile-bar {
  background: var(--color-dark-border);
}

[data-theme="dark"] .stat-card::before,
[data-theme="dark"] .fftri-stat-card::before {
  background: linear-gradient(
    90deg,
    var(--color-brand-blue-light),
    var(--color-dark-accent-cyan)
  );
}

[data-theme="dark"] .stat-card--featured,
[data-theme="dark"] .fftri-stat-card--featured {
  background: linear-gradient(
    135deg,
    var(--color-dark-hero-start) 0%,
    var(--color-dark-featured-end) 100%
  );
}

[data-theme="dark"] .last-race__header {
  background: linear-gradient(
    135deg,
    var(--color-dark-bg) 0%,
    var(--color-dark-header-end) 100%
  );
}

[data-theme="dark"] .last-race__stats {
  border-top: 1px solid var(--color-dark-border);
}

[data-theme="dark"] .results-table__head {
  background: var(--color-dark-elevated);
  border-bottom-color: var(--color-dark-border);
}

[data-theme="dark"] .result-row {
  border-bottom-color: var(--color-dark-border);
}

[data-theme="dark"] .result-row:hover {
  background: var(--color-dark-hover);
}

[data-theme="dark"] .result-ip {
  color: var(--color-dark-info-strong);
}

[data-theme="dark"] .result-row:nth-child(2) .result-ip {
  color: var(--color-dark-info);
}

[data-theme="dark"] .result-row:nth-child(n + 3) .result-ip {
  color: var(--color-dark-text-muted);
}

[data-theme="dark"] .distance-card__header {
  border-bottom-color: var(--color-dark-border);
}

[data-theme="dark"] .distance-card__letter {
  color: var(--color-dark-info-strong);
}

[data-theme="dark"] .distance-card__count {
  background: var(--color-dark-elevated);
}

[data-theme="dark"] .distance-card__stat {
  border-right-color: var(--color-dark-border);
}

/* ── Skeleton loader ────────────────────────────────────────── */
[data-theme="dark"] .fftri-skeleton-card {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-skeleton {
  background: var(--color-dark-border);
}

[data-theme="dark"] .fftri-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    var(--overlay-dark-shimmer-20),
    transparent
  );
}

.hero-compare-btn {
  position: absolute;
  top: var(--space-2-5);
  right: var(--space-4-5);
  z-index: var(--z-index-hero-chrome);
  border-radius: var(--radius-xl);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-extrabold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) 10px;
  min-width: var(--tap-target-compact);
  min-height: var(--tap-target-compact);
}

.hero-compare-btn:active {
  transform: scale(0.97);
}

.hero-user-actions {
  position: absolute;
  top: var(--space-2-5);
  right: var(--space-4-5);
  z-index: var(--z-index-hero-chrome);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fftri-hero-user-action-btn,
.hero-user-action-btn {
  border-radius: var(--radius-xl);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-extrabold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) 10px;
  min-width: var(--tap-target-compact);
  min-height: var(--tap-target-compact);
}

.fftri-hero-user-action-btn--icon,
.hero-user-action-btn--icon {
  width: var(--tap-target-compact);
  min-width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  padding: 0;
  justify-content: center;
  gap: 0;
}

.fftri-glass-btn--icon {
  width: var(--tap-target-compact);
  min-width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  min-height: var(--tap-target-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fftri-glass-btn--square {
  width: var(--tap-target-compact);
  min-width: var(--tap-target-compact);
  height: var(--tap-target-compact);
  min-height: var(--tap-target-compact);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fftri-like-btn {
  color: var(--fftri-blue);
}

.fftri-like-btn--disabled {
  color: color-mix(in srgb, var(--fftri-blue) 70%, var(--color-text-muted));
}

.fftri-like-icon--idle {
  color: var(--fftri-blue);
}

.fftri-like-icon--active {
  color: var(--fftri-orange);
}

.fftri-checklist-callout__mark {
  font-size: var(--font-size-30);
  line-height: 1;
}

.fftri-flex-fill {
  flex: 1;
}

.fftri-fill-overlay {
  position: absolute;
  inset: 0;
}

.fftri-hero-user-action-btn:active,
.hero-user-action-btn:active {
  transform: scale(0.97);
}

.fftri-toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--shell-toast-offset));
  z-index: var(--z-toast);
  pointer-events: none;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.fftri-toast {
  min-width: 180px;
  max-width: min(92vw, 480px);
  background: var(--overlay-ink-92);
  color: var(--color-white);
  border: 1px solid var(--overlay-white-16);
  border-radius: var(--radius-pill);
  padding: var(--space-2-5) 14px;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  box-shadow: 0 10px 24px var(--overlay-dark-shadow-24);
  transform: translateY(16px);
  opacity: 0;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.fftri-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.fftri-offline-banner {
  position: fixed;
  left: var(--space-3);
  right: var(--space-3);
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  z-index: var(--z-offline-banner);
  background: var(--gradient-offline-banner);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-label);
  font-weight: var(--fw-extrabold);
  text-align: center;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-offline-banner);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}

.fftri-offline-banner--visible {
  opacity: 1;
  transform: translateY(0);
}

[data-theme="dark"] .fftri-toast {
  background: var(--overlay-ink-96);
  border-color: var(--overlay-gray-400-26);
}

[data-theme="dark"] .fftri-offline-banner {
  background: var(--gradient-offline-banner-dark);
  box-shadow: var(--shadow-offline-banner-dark);
}

[data-theme="dark"] .notif-group,
[data-theme="dark"] .fftri-notif-group {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  box-shadow: 0 8px 18px var(--overlay-dark-shadow-24);
}

[data-theme="dark"] .notif-group__title {
  color: var(--color-dark-text-strong);
}

[data-theme="dark"] .notif-group__chevron {
  color: var(--color-dark-text-muted);
}

.fftri-quick-actions-sheet {
  position: fixed;
  left: calc(attr(data-sheet-left number, 0) * 1px);
  top: calc(attr(data-sheet-top number, 0) * 1px);
  z-index: var(--z-sheet);
  display: grid;
  gap: var(--space-1-5);
  min-width: 190px;
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-contrast-lower);
  background: var(--color-bg);
  box-shadow: 0 16px 32px var(--overlay-ink-20);
  animation: quick-actions-pop var(--duration-micro) ease-out;
}

.fftri-quick-actions-sheet::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--space-6);
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-contrast-lower);
  border-left: 1px solid var(--color-contrast-lower);
  background: var(--color-bg);
  transform: rotate(45deg);
}

.fftri-quick-actions-sheet--above::before {
  top: auto;
  bottom: -6px;
  border-top: 0;
  border-left: 0;
  border-right: 1px solid var(--color-contrast-lower);
  border-bottom: 1px solid var(--color-contrast-lower);
}

.fftri-quick-actions-sheet__btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--color-contrast-high);
  text-align: left;
  padding: var(--space-2-25) 10px;
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--type-meta);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
}

.fftri-quick-actions-sheet__btn:active {
  background: var(--color-bg-light);
}

@keyframes quick-actions-pop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[data-theme="dark"] .fftri-quick-actions-sheet {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
  box-shadow: 0 18px 34px var(--overlay-dark-shadow-34);
}

[data-theme="dark"] .fftri-quick-actions-sheet::before {
  background: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

[data-theme="dark"] .fftri-quick-actions-sheet__btn {
  color: var(--color-dark-text-strong);
}

[data-theme="dark"] .fftri-quick-actions-sheet__btn:active {
  background: var(--color-dark-hover);
}


.app-shell-header__desktop-nav {
  display: none;
}

@media (min-width: 768px) {
  body {
    min-height: 100vh;
    min-height: 100dvh;
    height: 100dvh;
    background: var(--color-bg-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body > main,
  body > #bottom-nav,
  body > .fftri-back-to-top {
    width: min(100vw, var(--app-column-width));
    max-width: var(--app-column-width);
    margin-left: auto;
    margin-right: auto;
  }

  body > main {
    background: var(--color-bg-surface);
    box-shadow:
      0 0 0 1px var(--color-border-soft),
      0 4px 24px var(--overlay-dark-06);
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    padding-bottom: 0;
  }

  .app-shell-main {
    overflow-y: scroll;
    scrollbar-gutter: stable both-edges;
  }

  .app-shell-main > *,
  .fftri-users-page,
  .users-page,
  .fftri-results-page,
  .results-page,
  .user-detail-page,
  .fftri-page-gutter,
  .fftri-screen-topbar,
  .fftri-detail-tabs,
  .fftri-detail-panel,
  .fftri-detail-panel__content,
  .fftri-detail-panel__content--compact,
  .fftri-topbar-advanced-panel,
  .fftri-loading-lines,
  .fftri-weather-skeleton,
  .fftri-skeleton-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .fftri-detail-panel__content > *,
  .fftri-detail-panel__content--compact > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .app-shell-header {
    position: sticky;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: var(--space-3);
    padding-right: clamp(var(--space-4), 4vw, var(--space-8));
    padding-left: clamp(var(--space-4), 4vw, var(--space-8));
    gap: var(--space-4);
  }

  .app-shell-header__brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .app-shell-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .app-shell-header__desktop-nav {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-shell-header__desktop-nav::-webkit-scrollbar {
    display: none;
  }

  .app-shell-header__desktop-nav__item {
    flex-direction: row;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: transparent;
    border-width: 0;
    border-radius: var(--radius-full);
    min-height: var(--tap-target-compact);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--overlay-white-75);
    transition: background var(--duration-fast) ease, color var(--duration-fast) ease;
  }

  .app-shell-header__desktop-nav__item span {
    display: initial;
    line-height: normal;
  }

  .app-shell-header__desktop-nav__item:hover {
    background: var(--overlay-white-12);
    color: var(--color-white);
  }

  .app-shell-header__desktop-nav__item[aria-current="page"],
  .app-shell-header__desktop-nav__item.is-active {
    background: var(--overlay-white-18);
    color: var(--color-white);
    font-weight: var(--fw-bold);
  }

  .app-shell-header__desktop-nav__item::after {
    display: none;
  }

  .app-shell-bottom-nav,
  #bottom-nav {
    display: none !important;
  }

  .fftri-back-to-top {
    left: 50%;
    right: auto;
    width: calc(min(100vw, var(--app-column-width)) - (var(--space-4) * 2));
    max-width: calc(var(--app-column-width) - (var(--space-4) * 2));
    height: 48px;
    border-radius: var(--radius-xl);
    transform: translate(-50%, 12px) scale(0.96);
    bottom: var(--space-6);
  }

  .fftri-back-to-top.is-visible {
    transform: translate(-50%, 0) scale(1);
  }

  .fftri-toast-root {
    left: calc((100vw - var(--app-column-width)) / 2);
    right: calc((100vw - var(--app-column-width)) / 2);
    bottom: var(--space-6);
  }

  .fftri-offline-banner {
    left: calc((100vw - var(--app-column-width)) / 2 + 12px);
    right: calc((100vw - var(--app-column-width)) / 2 + 12px);
    top: calc(56px + var(--space-2));
  }
}

@media (min-width: 768px) {
  [data-theme="dark"] body {
    background: var(--color-dark-bg-deep);
  }

  [data-theme="dark"] body > main {
    box-shadow:
      0 0 0 1px var(--color-dark-border),
      0 4px 24px var(--overlay-black-30);
  }
}
.fftri-podium-block {
  display: grid;
}

.fftri-card-icon-avatar {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
}

.fftri-card-avatar-fallback {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border-soft);
}

.fftri-organizer-link {
  transition: opacity var(--duration-fast) ease;
}

.fftri-organizer-link:hover {
  opacity: 0.8;
}

.fftri-organizer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fftri-organizer-avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  font-weight: var(--fw-bold);
}

.fftri-organizer-label {
  color: var(--color-text-muted);
  font-size: var(--type-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fftri-organizer-name {
  color: var(--color-text-strong);
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  line-height: 1.35;
}

.fftri-metric-card-value {
  margin-top: var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
}

.fftri-metric-card--center {
  text-align: center;
}

.fftri-card-disabled-btn {
  border: 1px solid var(--color-border-soft);
  background: var(--color-bg-muted);
  color: var(--color-text-soft);
  cursor: not-allowed;
}

.fftri-card-surface-muted {
  background: var(--color-bg-muted);
}

.fftri-card-section-header {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-muted);
}

.fftri-card-section-body {
  padding: var(--space-4);
}

.fftri-card-section-body--compact {
  padding: var(--space-3);
}

.user-card__score-wrap {
  flex-shrink: 0;
  text-align: right;
}

.user-card__score {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-24);
  font-weight: var(--fw-black);
  color: var(--color-brand-blue-deep);
  display: block;
  line-height: 1;
}

.user-card__score-label {
  font-family: "Manrope", "Manrope Fallback", sans-serif;
  font-size: var(--font-size-9);
  color: var(--color-contrast-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-top: 1px;
}

.user-card__score-bar {
  width: 48px;
  height: 4px;
  background: var(--color-bg-light);
  border-radius: var(--radius-2xs);
  margin-top: var(--space-1-25);
  overflow: hidden;
  position: relative;
}

.user-card__score-bar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.user-card__score-bar-fill {
  fill: var(--color-brand-blue-deep);
}

.user-card__score-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  font-size: 0;
  line-height: 0;
  transition: width var(--duration-normal) ease;
}

.user-card__score-fill[data-rank-tone="1"] {
  fill: var(--rank1);
}

.user-card__score-fill[data-rank-tone="2"] {
  fill: var(--rank2);
}

.user-card__score-fill[data-rank-tone="3"] {
  fill: var(--rank3);
}

.user-card__score-fill[data-score-palette="1"] {
  fill: var(--color-brand-600);
}

.user-card__score-fill[data-score-palette="2"] {
  fill: var(--color-brand-500);
}

.user-card__score-fill[data-score-palette="3"] {
  fill: var(--color-discipline-aqt);
}

.user-card__score-fill[data-score-palette="4"] {
  fill: var(--color-format-l);
}

.user-card__score-fill[data-score-palette="5"] {
  fill: var(--color-format-cr);
}

.user-card__arrow {
  width: 16px;
  color: var(--color-contrast-medium);
  flex-shrink: 0;
}

[data-theme="dark"] .hero-compare-btn {
  border-color: var(--overlay-dark-overlay-24);
  background: var(--overlay-dark-overlay-24);
}

[data-theme="dark"] .fftri-hero-user-action-btn,
[data-theme="dark"] .hero-user-action-btn {
  border-color: var(--overlay-dark-overlay-24);
  background: var(--overlay-dark-overlay-24);
}
}