html, body {
        overflow-x: hidden;
        max-width: 100%;
      }

      :root {
        --mobile-header-theme: #022b3a;
        --mobile-header-overlay: rgba(2, 6, 23, 0.3);
        --mobile-sticky-theme: #030014;
        --mobile-sticky-overlay: rgba(3, 0, 20, 0.72);
        --mobile-navopen-overlay: rgba(3, 0, 20, 0.9);
      }


body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #020617;
  pointer-events: none;
  z-index: 9998;
}
header {
      isolation: isolate;
      overflow: visible;
    }

    header > * {
      position: relative;
      z-index: 1;
    }

      [x-cloak] {
        display: none !important;
      }


      @keyframes fadeInUp {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .fade-in-up {
        animation: fadeInUp 0.6s ease-out forwards;
        opacity: 0;
        transform: none;
      }

      .delay-100 { animation-delay: 0.1s; }
      .delay-200 { animation-delay: 0.2s; }
      .delay-300 { animation-delay: 0.3s; }
      .delay-400 { animation-delay: 0.4s; }


      button,
      [type="button"],
      [type="submit"],
      .btn,
      [role="button"],
      input[type="checkbox"],
      input[type="radio"],
      select {
        cursor: pointer;
      }




    @media (max-width: 639px) {
      .mobile-card-tight {
        width: calc(100% + 1rem) !important;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        padding: 1.15rem 0.95rem !important;
        border-radius: 22px !important;
      }

      .mobile-inner-card-tight {
        padding: 16px !important;
      }

      section.relative.z-10.mb-15 > .mb-12,
      section.relative.z-10.mb-15 > .mb-12.relative {
        margin: 0 0 1.12rem !important;
        padding: 0 !important;
      }

      section.relative.z-10.mb-15 > .mb-12 h1:first-of-type,
      section.relative.z-10.mb-15 > .mb-12 h2:first-of-type,
      section.relative.z-10.mb-15 > .mb-12.relative h1:first-of-type,
      section.relative.z-10.mb-15 > .mb-12.relative h2:first-of-type {
        max-width: 100%;
        margin: 0;
        padding-bottom: 0.66rem !important;
        font-size: clamp(1.72rem, 7.2vw, 1.98rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.045em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      section.relative.z-10.mb-15 > .mb-12 > p,
      section.relative.z-10.mb-15 > .mb-12.relative > p {
        margin-top: 0.48rem !important;
        max-width: 17.5rem;
        font-size: 0.88rem !important;
        line-height: 1.42 !important;
        letter-spacing: -0.01em;
        color: rgba(255,255,255,0.58) !important;
      }

      section.relative.z-10.mb-15 > .mb-12.relative.app-page-header {
        padding-top: 0 !important;
      }
      }


    .spinner-loader {
      width: 48px;
      height: 48px;
      border: 4px solid rgba(46, 209, 244, 0.2);
      border-top-color: #2ed1f4;
      border-radius: 50%;
      animation: spinner-rotate 1s linear infinite;
    }

    @keyframes spinner-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-text {
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
    }

    .spinner-loader.spinner-loader-strava {
      width: 48px;
      height: 48px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      flex: 0 0 48px;
      border-color: rgba(252, 76, 2, 0.22);
      border-top-color: #FC4C02;
    }

    .strava-sync-spinner {
      width: 44px;
      height: 44px;
      aspect-ratio: 1 / 1;
      flex: 0 0 44px;
      display: block;
      margin: 0 auto 12px;
      pointer-events: none;
    }

    #stravaLoading .strava-sync-spinner {
      margin-bottom: 0;
    }

    .strava-sync-spinner svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .strava-sync-spinner-track,
    .strava-sync-spinner-arc {
      fill: none;
      stroke-width: 4;
      vector-effect: non-scaling-stroke;
    }

    .strava-sync-spinner-track {
      stroke: rgba(252, 76, 2, 0.28);
    }

    .strava-sync-spinner-arc {
      stroke: #FC4C02;
      stroke-linecap: round;
      stroke-dasharray: 72 42;
      transform-box: view-box;
      transform-origin: center;
      animation: strava-spinner-rotate 0.85s linear infinite;
      filter: drop-shadow(0 0 8px rgba(252, 76, 2, 0.45));
    }

    @keyframes strava-spinner-rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .strava-sync-divider {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(252, 76, 2, 0.4) 0%, rgba(252, 76, 2, 0.2) 50%, transparent 100%);
      margin-bottom: var(--strava-sync-divider-gap, 30px);
    }

    @keyframes stravaSkeletonSweep {
      from { transform: translateX(-120%); }
      to { transform: translateX(120%); }
    }

    .strava-loading-skeleton {
      position: relative;
      display: grid;
      gap: 14px;
      min-height: 278px;
      padding: 4px 0;
    }

    .strava-loading-skeleton.is-exiting {
      position: absolute;
      top: var(--strava-loading-overlay-top);
      left: var(--strava-loading-overlay-left);
      width: var(--strava-loading-overlay-width);
      box-sizing: border-box;
      z-index: 2;
      min-height: 0;
      gap: 0;
      padding-top: 0;
      padding-bottom: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-6px);
      will-change: max-height, opacity, transform;
      pointer-events: none;
      transition: max-height 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), gap 320ms ease, padding 320ms ease;
    }

    .strava-loading-copy {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .strava-skeleton-profile,
    .strava-skeleton-grid {
      display: grid;
      gap: 14px;
    }

    .strava-skeleton-profile {
      grid-template-columns: 72px minmax(0, 1fr);
      align-items: center;
      min-height: 82px;
    }

    .strava-skeleton-profile-copy {
      display: grid;
      gap: 9px;
      align-content: center;
    }

    .strava-skeleton-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .strava-skeleton-block {
      position: relative;
      display: block;
      overflow: hidden;
      border: 1px solid rgba(252, 76, 2, 0.1);
      background: rgba(252, 76, 2, 0.055);
    }

    .strava-skeleton-block::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, transparent 18%, rgba(255, 180, 140, 0.18) 48%, transparent 78%);
      animation: stravaSkeletonSweep 1.25s ease-in-out infinite;
    }

    .strava-skeleton-avatar {
      width: 62px;
      height: 62px;
      border-radius: 999px;
    }

    .strava-skeleton-line {
      height: 10px;
      border-radius: 999px;
    }

    .strava-skeleton-line--title { width: min(190px, 72%); }
    .strava-skeleton-line--body { width: min(142px, 54%); }

    .strava-skeleton-button {
      width: 124px;
      height: 34px;
      border-radius: 10px;
    }

    .strava-skeleton-stat {
      height: 68px;
      border-radius: 14px;
    }

    .strava-skeleton-trend {
      height: 104px;
      border-radius: 10px;
    }
    .strava-sync-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: var(--strava-sync-overlay-offset, 0px);
      display: none;
      align-items: stretch;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: var(--strava-sync-divider-gap, 30px) 32px 30px;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border-radius: 0 0 1.5rem 1.5rem;
      z-index: 50;
      overflow: hidden;
    }
    .strava-sync-overlay-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100%;
      box-sizing: border-box;
      padding-top: 0;
      text-align: center;
    }

    .strava-sync-overlay-content p {
      margin: 0;
      line-height: 1.35;
    }

    .strava-connect-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: min(100%, 280px);
      height: 44px;
      padding: 0 20px;
      margin: 0 auto;
      box-sizing: border-box;
      border-radius: 10px;
      font-size: 14px;
      line-height: 1;
      white-space: nowrap;
    }

    .strava-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 132px;
      height: 44px;
      padding: 0 16px;
      box-sizing: border-box;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1;
      white-space: nowrap;
    }

    .strava-sync-btn {
      background: linear-gradient(180deg, rgba(252, 76, 2, 0.15) 0%, rgba(252, 76, 2, 0.05) 100%);
    }

    .strava-disconnect-btn {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.36);
    }

    .strava-sync-icon {
      width: 16px;
      height: 16px;
      min-width: 16px;
      min-height: 16px;
      max-width: 16px;
      max-height: 16px;
      flex-shrink: 0;
    }

    .strava-sync-arrow-icon {
      width: 12px;
      height: 12px;
      min-width: 12px;
      min-height: 12px;
      flex-shrink: 0;
    }

    .strava-disconnect-icon {
      width: 14px;
      height: 14px;
      min-width: 14px;
      min-height: 14px;
      flex-shrink: 0;
    }

    .strava-connected-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      padding: 22px 20px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.07), rgba(252, 76, 2, 0.02));
      border: 1px solid rgba(252, 76, 2, 0.12);
      box-shadow: inset 0 0 0 1px rgba(252, 76, 2, 0.05);
      margin-bottom: 28px;
      position: relative;
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-connected-card::before {
      content: '';
      position: absolute;
      left: -10%;
      right: -10%;
      bottom: -58%;
      height: 128%;
      border-radius: 50%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.32) 0%, rgba(252, 76, 2, 0.18) 28%, rgba(252, 76, 2, 0.08) 44%, rgba(252, 76, 2, 0.02) 56%, rgba(252, 76, 2, 0) 68%),
        radial-gradient(ellipse at 52% 98%, rgba(255, 128, 72, 0.14) 0%, rgba(252, 76, 2, 0.06) 34%, rgba(252, 76, 2, 0) 60%);
      filter: blur(20px);
      opacity: 0.9;
      z-index: 0;
    }

    .strava-athlete-avatar-wrap {
      width: 72px;
      height: 72px;
      border-radius: 999px;
      overflow: hidden;
      border: 2px solid rgba(252, 76, 2, 0.92);
      background: rgba(252, 76, 2, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 10px rgba(252, 76, 2, 0.3), inset 0 0 0 1px rgba(252, 132, 84, 0.18);
    }

    .strava-athlete-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .strava-athlete-avatar-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .strava-connected-actions {
      margin-top: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .strava-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 28px;
    }

    .strava-trends-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 26px;
    }

    .strava-trend-card {
      position: relative;
      border-radius: 14px;
      padding: 14px 14px 12px 14px;
      background: linear-gradient(140deg, rgba(252, 76, 2, 0.09), rgba(252, 76, 2, 0.02));
      border: 1px solid rgba(252, 76, 2, 0.18);
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-stat-card {
      position: relative;
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-connected-card::after,
    .strava-stat-card::after,
    .strava-trend-card::after {
      content: '';
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -26px;
      height: 40px;
      pointer-events: none;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(252, 96, 26, 0.48) 0%, rgba(252, 76, 2, 0.26) 42%, rgba(252, 76, 2, 0) 82%);
      filter: blur(11px);
      opacity: 0;
      transform: translateY(10px) scaleX(0.92);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .strava-connected-card > *,
    .strava-stat-card > *,
    .strava-trend-card > * {
      position: relative;
      z-index: 1;
    }

    .strava-connected-card:hover,
    .strava-stat-card:hover,
    .strava-trend-card:hover {
      border-color: #FC4C02 !important;
      box-shadow: inset 0 0 0 1px rgba(252, 96, 28, 0.12), 0 10px 28px rgba(0, 0, 0, 0.22), 0 0 24px rgba(252, 76, 2, 0.09);
      transform: translateY(-1px);
    }

    .strava-connected-card:hover {
      box-shadow: inset 0 0 0 1px rgba(252, 76, 2, 0.26), 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 26px rgba(252, 76, 2, 0.18), 0 0 46px rgba(252, 76, 2, 0.1);
    }

    .strava-stat-card:hover,
    .strava-trend-card:hover {
      border-color: rgba(252, 96, 28, 0.36) !important;
      box-shadow: inset 0 0 0 1px rgba(252, 96, 28, 0.14), 0 10px 24px rgba(0,0,0,0.2), 0 0 18px rgba(252, 76, 2, 0.08);
    }

    .strava-connected-card:hover::after,
    .strava-stat-card:hover::after,
    .strava-trend-card:hover::after {
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }

    .strava-trend-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }

    .strava-trend-title {
      color: #ffc39e;
      font-size: 0.7rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-weight: 700;
      text-shadow: 0 0 10px rgba(252, 76, 2, 0.24), 0 0 8px rgba(216, 90, 27, 0.2);
    }

    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
      .strava-trend-title {
        background: linear-gradient(92deg, rgba(255, 154, 104, 0.98) 0%, rgba(252, 76, 2, 0.96) 58%, rgba(216, 90, 27, 0.93) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .strava-trend-current {
      color: #ffffff;
      font-size: 0.78rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .strava-trend-chart-wrap {
      position: relative;
      height: 104px;
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
    }

    .strava-animate-in {
      opacity: 0;
      transform: none;
      will-change: opacity;
    }

    .strava-animate-in.is-visible {
      animation: stravaSoftReveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .strava-animate-in.is-visible.strava-reveal-static {
      animation: none;
      opacity: 1;
      transform: none;
      will-change: auto;
    }

    .strava-trend-overlay-legend {
      position: absolute;
      top: 8px;
      right: 8px;
      bottom: 8px;
      width: 52px;
      border-radius: 0;
      border: none;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 2px 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      gap: 4px;
      pointer-events: none;
    }

    .strava-trend-legend-row {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      line-height: 1;
      min-height: 18px;
      align-items: center;
    }

    .strava-trend-legend-label {
      display: none;
    }

    .strava-metric-tech-label {
      color: #ffc39e;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
      text-shadow: 0 0 10px rgba(252, 76, 2, 0.24), 0 0 8px rgba(216, 90, 27, 0.2);
    }

    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
      .strava-metric-tech-label {
        background: linear-gradient(90deg, rgba(255, 154, 104, 0.98) 0%, rgba(252, 76, 2, 0.96) 60%, rgba(216, 90, 27, 0.93) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .strava-trend-legend-value {
      color: rgba(182, 188, 198, 0.92);
      font-size: 0.62rem;
      font-weight: 600;
      white-space: nowrap;
      letter-spacing: 0.01em;
      text-shadow: 0 0 8px rgba(0,0,0,0.28);
    }

    .strava-shoe-animate {
      opacity: 0;
      transform: none;
      will-change: opacity;
    }

    .strava-shoe-animate.is-visible {
      animation: stravaShoeReveal 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .strava-chart-reveal {
      animation: stravaChartReveal 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
      transform-origin: center;
    }

    @keyframes stravaSoftReveal {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes stravaShoeReveal {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes stravaChartReveal {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .strava-skeleton-block::after,
      .strava-animate-in.is-visible,
      .strava-shoe-animate.is-visible,
      .strava-chart-reveal {
        animation: none;
      }

      .strava-animate-in,
      .strava-shoe-animate {
        opacity: 1;
        transform: none;
      }
    }

    .strava-trend-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .strava-trend-empty {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.35);
      font-size: 0.72rem;
      text-align: center;
      padding: 0 10px;
    }

    .strava-trend-foot {
      margin-top: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(255,255,255,0.38);
      font-size: 0.62rem;
      line-height: 1;
    }

    .strava-shoe-row {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      padding: 14px 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.06), rgba(252, 76, 2, 0.01));
      border: 1px solid rgba(252, 76, 2, 0.12);
      position: relative;
      overflow: hidden;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-shoe-row.strava-row-editing {
      overflow: visible;
      z-index: 2000000;
    }

    .strava-shoe-row.strava-row-editing .shoe-dropdown {
      z-index: 2147483647 !important;
    }

    #stravaSyncSection {
      --strava-sync-divider-gap: 30px;
      --strava-sync-overlay-body-min: 158px;
      overflow: visible !important;
      z-index: 10;
    }

    #stravaSyncSection.strava-sync-section-syncing {
      padding-bottom: calc(var(--strava-sync-overlay-body-min) - var(--strava-sync-divider-gap)) !important;
    }

    #stravaSyncSection.strava-sync-section-syncing > :not(.strava-sync-overlay) {
      position: relative;
      z-index: 0 !important;
      pointer-events: none;
    }

    #stravaSyncSection.strava-sync-section-syncing::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      pointer-events: none;
      z-index: 1;
    }

    #stravaSyncSection.strava-sync-section-syncing .strava-sync-overlay {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      z-index: 2;
    }

    #stravaSyncSection .strava-shoe-row.strava-row-editing {
      z-index: 2147483646;
    }

    #stravaSyncSection .shoe-dropdown {
      z-index: 2147483647;
    }

    .strava-shoe-row::after {
      content: '';
      position: absolute;
      left: 9%;
      right: 9%;
      bottom: -20px;
      height: 32px;
      pointer-events: none;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(252, 96, 26, 0.42) 0%, rgba(252, 76, 2, 0.2) 44%, rgba(252, 76, 2, 0) 82%);
      filter: blur(9px);
      opacity: 0;
      transform: translateY(8px) scaleX(0.92);
      transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .strava-shoe-row > * {
      position: relative;
      z-index: 1;
    }

    .strava-shoe-row:hover {
      border-color: rgba(252, 96, 28, 0.36);
      box-shadow: inset 0 0 0 1px rgba(252, 96, 28, 0.14), 0 10px 24px rgba(0,0,0,0.2), 0 0 18px rgba(252, 76, 2, 0.08);
      transform: translateY(-1px);
    }

    .strava-shoe-row:hover::after {
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }

    .strava-shoe-row.strava-row-deeplink-focus {
      border-color: rgba(34, 197, 94, 0.5);
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.18), 0 12px 26px rgba(0,0,0,0.22), 0 0 22px rgba(34, 197, 94, 0.14);
    }

    .strava-shoe-row.strava-row-saving {
      pointer-events: none;
    }

    .strava-shoe-row.strava-row-saving > :not(.strava-row-saving-overlay) {
      opacity: 0.45;
      filter: blur(1px) saturate(0.75);
    }

    .strava-row-saving-overlay {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(8, 6, 18, 0.28);
      backdrop-filter: blur(2.8px);
      -webkit-backdrop-filter: blur(2.8px);
      pointer-events: none;
      z-index: 4;
    }

    .strava-row-saving-spinner {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 2px solid rgba(252, 76, 2, 0.24);
      border-top-color: rgba(252, 136, 84, 0.98);
      border-right-color: rgba(252, 100, 34, 0.9);
      animation: stravaSpin 700ms linear infinite;
      box-shadow: 0 0 10px rgba(252, 76, 2, 0.28), 0 0 22px rgba(252, 76, 2, 0.14);
    }

    .strava-shoe-text-col {
      min-width: 0;
    }

    .strava-shoe-text-main {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      align-items: start;
      gap: 12px;
      min-width: 0;
    }

    .strava-shoe-text-details {
      min-width: 0;
    }

    .strava-shoe-image-wrap {
      width: 56px;
      height: 56px;
      border-radius: 10px;
      overflow: hidden;
      flex-shrink: 0;
      background: rgba(255,255,255,0.02);
      border: 2px solid rgba(252, 76, 2, 0.92);
      box-shadow: 0 0 10px rgba(252, 76, 2, 0.3), inset 0 0 0 1px rgba(252, 132, 84, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .strava-shoe-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .strava-shoe-title {
      color: #fff;
      font-size: 0.92rem;
      font-weight: 600;
      margin: 0 0 4px 0;
      line-height: 1.35;
      word-break: break-word;
    }

    .strava-shoe-raw {
      color: rgba(255,255,255,0.32);
      font-size: 0.67rem;
      margin: 0 0 8px 0;
      line-height: 1.4;
      min-width: 0;
      word-break: break-word;
    }

    .strava-shoe-mileage {
      color: rgba(255,255,255,0.6);
      font-size: 0.74rem;
      line-height: 1.25;
      margin: 0;
    }

    .strava-shoe-bar-col {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
      align-items: stretch;
    }

    .strava-shoe-scale {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: rgba(255,255,255,0.42);
      font-size: 0.62rem;
      line-height: 1;
      letter-spacing: 0.01em;
    }

    .strava-shoe-progress {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: visible;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
    }

    .strava-shoe-progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 5px;
      background: linear-gradient(90deg, #d85a1b, #fc4c02, #ff7a3d);
      transition: width .35s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 0 10px rgba(252,76,2,.62), 0 0 25px rgba(252,76,2,.38), 0 0 50px rgba(252,76,2,.18);
    }

    .strava-shoe-footer {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 7px;
    }

    .strava-shoe-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .strava-inline-edit-form {
      width: 100%;
      grid-column: 1 / -1;
      opacity: 0;
      transform: translateY(10px) scale(0.995);
      animation: stravaInlineEditReveal 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .strava-inline-edit-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 10px;
    }

    .strava-inline-edit-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 6px;
      flex-wrap: wrap;
    }

    .strava-inline-edit-actions > button {
      min-height: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    .strava-edit-cancel-btn {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      color: rgba(187,190,198,0.82);
      cursor: pointer;
    }

    .strava-edit-cancel-btn:hover {
      background: rgba(255,255,255,0.08);
    }

    .strava-edit-remove-btn {
      background: linear-gradient(180deg, rgba(239, 68, 68, 0.2) 0%, rgba(127, 29, 29, 0.1) 100%);
      border: 1px solid rgba(239, 68, 68, 0.58);
      color: rgba(255, 240, 240, 0.96);
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.18), inset 0 0 0 1px rgba(255, 150, 150, 0.12);
      cursor: pointer;
    }

    .strava-edit-remove-btn:hover {
      background: linear-gradient(180deg, rgba(239, 68, 68, 0.3) 0%, rgba(127, 29, 29, 0.16) 100%);
      border-color: rgba(248, 113, 113, 0.82);
      box-shadow: 0 0 16px rgba(239, 68, 68, 0.28), inset 0 0 0 1px rgba(255, 170, 170, 0.18);
    }

    .strava-edit-remove-btn:focus-visible {
      outline: none;
      border-color: rgba(252, 165, 165, 0.92);
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22), 0 0 16px rgba(239, 68, 68, 0.28);
    }

    .strava-edit-label {
      color: rgba(178, 183, 192, 0.92) !important;
      font-size: 0.7rem !important;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .strava-edit-input {
      color: rgba(221, 224, 230, 0.95) !important;
      font-size: 0.84rem !important;
    }

    .strava-edit-input::placeholder {
      color: rgba(176, 181, 191, 0.58) !important;
    }

    .strava-inline-edit-form input.strava-edit-input.strava-model-valid,
    .strava-inline-edit-form input.strava-edit-input.strava-model-valid:focus,
    .strava-inline-edit-form input.strava-edit-input.strava-brand-valid,
    .strava-inline-edit-form input.strava-edit-input.strava-brand-valid:focus {
      border-color: rgba(34, 197, 94, 0.85) !important;
      background: rgba(34, 197, 94, 0.08) !important;
      backdrop-filter: blur(12px) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 14px rgba(34, 197, 94, 0.24), 0 0 30px rgba(34, 197, 94, 0.12) !important;
    }

    .strava-inline-edit-form input.strava-edit-input.strava-model-missing,
    .strava-inline-edit-form input.strava-edit-input.strava-model-missing:focus {
      border-color: rgba(252, 76, 2, 0.72) !important;
      background: rgba(252, 76, 2, 0.08) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 12px rgba(252, 76, 2, 0.2), 0 0 24px rgba(252, 76, 2, 0.1) !important;
    }

    .strava-edit-info-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .strava-edit-info-btn {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid rgba(252, 76, 2, 0.62);
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.32), rgba(252, 76, 2, 0.12));
      color: rgba(255, 212, 188, 0.98);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 0 12px rgba(252, 76, 2, 0.28), inset 0 0 0 1px rgba(255, 170, 120, 0.24);
      cursor: help;
    }

    .strava-edit-info-btn:hover {
      transform: scale(1.06);
      border-color: rgba(252, 136, 84, 0.9);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28), 0 0 18px rgba(252, 76, 2, 0.38), inset 0 0 0 1px rgba(255, 190, 150, 0.3);
    }

    .strava-edit-info-tooltip {
      position: absolute;
      right: 0;
      bottom: calc(100% + 10px);
      width: min(360px, 72vw);
      padding: 14px 15px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(44, 18, 12, 0.98), rgba(55, 22, 14, 0.98));
      border: 1px solid rgba(252, 96, 28, 0.58);
      box-shadow: 0 0 24px rgba(252, 76, 2, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 165, 112, 0.16);
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      pointer-events: none;
      z-index: 2147483647;
    }

    .strava-edit-info-tooltip::after {
      content: '';
      position: absolute;
      right: 10px;
      top: calc(100% - 1px);
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      background: linear-gradient(135deg, rgba(44, 18, 12, 0.98), rgba(55, 22, 14, 0.98));
      border-right: 1px solid rgba(252, 96, 28, 0.58);
      border-bottom: 1px solid rgba(252, 96, 28, 0.58);
    }

    .strava-edit-info-tooltip h5 {
      margin: 0 0 7px 0;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: rgba(255, 255, 255, 0.96);
      text-shadow: none;
    }

    .strava-edit-info-tooltip p {
      margin: 0;
      font-size: 0.68rem;
      line-height: 1.45;
      color: rgba(255, 228, 212, 0.92);
    }

    @media (min-width: 640px) {
      .strava-edit-info-trigger:hover .strava-edit-info-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }

    .strava-edit-info-trigger:focus-within .strava-edit-info-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .section-tooltip-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 30;
    }

    .section-tooltip-trigger:hover,
    .section-tooltip-trigger:focus-within,
    .section-tooltip-trigger.tooltip-active {
      z-index: 2147483647;
    }

    .section-tooltip {
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      width: min(390px, 78vw);
      padding: 14px 15px;
      border-radius: 12px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
      pointer-events: none;
      z-index: 2147483647 !important;
    }

    .section-tooltip::after {
      content: '';
      position: absolute;
      right: 10px;
      bottom: calc(100% - 1px);
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      border-left: 1px solid var(--help-tooltip-border, rgba(148, 163, 184, 0.26));
      border-top: 1px solid var(--help-tooltip-border, rgba(148, 163, 184, 0.26));
    }

    .section-tooltip h5 {
      margin: 0 0 8px;
    }

    .section-tooltip p {
      margin: 0;
    }

    @media (min-width: 640px) {
      .section-tooltip-trigger:hover .section-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    .section-tooltip-trigger.tooltip-active .section-tooltip,
    .section-tooltip-trigger:focus-within .section-tooltip,
    .section-tooltip.tooltip-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .profile-shoe-opinions-card {
      position: relative;
      isolation: isolate;
      z-index: 20;
    }

    .profile-shoe-opinions-card:has(.section-tooltip-trigger:hover),
    .profile-shoe-opinions-card:has(.section-tooltip-trigger:focus-within),
    .profile-shoe-opinions-card:has(.section-tooltip-trigger.tooltip-active),
    .profile-shoe-opinions-card:has(.section-tooltip.tooltip-open) {
      overflow: visible !important;
      z-index: 260;
    }

    .profile-shoe-opinions-heading {
      position: relative;
      z-index: 90;
    }

    .profile-shoe-opinions-card #shoeOpinionsInnerSection {
      position: relative;
      z-index: 1;
    }

    @media (min-width: 641px) and (hover: hover) {
      .profile-shoe-opinions-heading .section-tooltip {
        left: 0;
        right: auto;
      }

      .profile-shoe-opinions-heading .section-tooltip::after {
        left: 10px;
        right: auto;
      }
    }

    .shoe-optional-score-wrap {
      margin-top: 20px;
      position: relative;
      z-index: 2;
    }

    .shoe-optional-score-wrap.is-open,
    .shoe-optional-score-wrap:has(.section-tooltip-trigger:hover),
    .shoe-optional-score-wrap:has(.section-tooltip-trigger:focus-within),
    .shoe-optional-score-wrap:has(.section-tooltip-trigger.tooltip-active) {
      z-index: 90;
    }

    .shoe-optional-score-toggle-row {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px 10px 14px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.2);
      background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      backdrop-filter: blur(8px);
      color: white;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
      position: relative;
      z-index: 8;
    }

    .shoe-optional-score-toggle-row:focus-within,
    .shoe-optional-score-wrap.is-open .shoe-optional-score-toggle-row {
      border-color: #2ed1f4;
      background: rgba(46, 209, 244, 0.05);
      box-shadow: 0 0 15px rgba(46, 209, 244, 0.15), 0 0 30px rgba(46, 209, 244, 0.1);
    }

    .shoe-optional-score-toggle {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
    }

    .shoe-optional-score-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
      min-width: 0;
      color: rgba(255,255,255,0.74);
      font-size: 0.9rem;
      line-height: 1.25;
    }

    .shoe-optional-score-badge {
      flex: 0 0 auto;
      color: rgba(46, 209, 244, 0.9);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .shoe-optional-score-chevron {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      color: rgba(255,255,255,0.54);
      transition: transform 0.22s ease, color 0.22s ease;
    }

    .shoe-optional-score-wrap.is-open .shoe-optional-score-chevron {
      transform: rotate(180deg);
      color: #2ed1f4;
    }

    .shoe-optional-score-panel {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-4px);
      transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
    }

    .shoe-optional-score-panel.is-open {
      max-height: 760px;
      opacity: 1;
      transform: translateY(0);
      overflow: visible;
    }

    .shoe-optional-score-copy {
      margin: 12px 0 0;
      color: rgba(255,255,255,0.52);
      font-size: 0.78rem;
      line-height: 1.45;
    }

    .shoe-score-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 14px;
    }

    .shoe-score-field {
      position: relative;
      min-width: 0;
      z-index: 1;
    }

    .shoe-score-field:has(.section-tooltip-trigger:hover),
    .shoe-score-field:has(.section-tooltip-trigger:focus-within),
    .shoe-score-field:has(.section-tooltip-trigger.tooltip-active) {
      z-index: 120;
    }

    .shoe-score-label-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
      min-width: 0;
    }

    .shoe-score-grid label {
      display: inline-flex;
      align-items: baseline;
      gap: 5px;
      margin-bottom: 0;
      color: #2ed1f4;
      font-size: 0.82rem;
      line-height: 1.25;
    }

    .shoe-score-range {
      color: rgba(255,255,255,0.5);
      font-size: 0.92em;
    }

    .shoe-score-help .section-tooltip {
      left: -8px;
      right: auto;
      top: calc(100% + 10px);
      width: min(330px, 74vw);
    }

    .shoe-score-help .section-tooltip::after {
      left: 12px;
      right: auto;
    }

    .shoe-score-field:nth-child(even) .shoe-score-help .section-tooltip {
      left: auto;
      right: -8px;
    }

    .shoe-score-field:nth-child(even) .shoe-score-help .section-tooltip::after {
      left: auto;
      right: 12px;
    }

    .shoe-score-tooltip p {
      margin: 0;
    }

    .shoe-score-tooltip p + p {
      margin-top: 8px;
    }

    .shoe-score-grid input {
      width: 100%;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.2);
      background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      backdrop-filter: blur(8px);
      color: white;
      font-size: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .shoe-score-grid input:focus {
      outline: none;
      border-color: #2ed1f4;
      background: rgba(46, 209, 244, 0.05);
      box-shadow: 0 0 15px rgba(46, 209, 244, 0.15), 0 0 30px rgba(46, 209, 244, 0.1);
    }

    @media (max-width: 640px) {
      .shoe-score-grid {
        grid-template-columns: 1fr;
      }

      .shoe-optional-score-title {
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
      }
    }

    .strava-inline-edit-form .strava-edit-input:focus,
    .strava-inline-edit-form input.strava-edit-input:focus {
      outline: none;
      border-color: #FC4C02 !important;
      background: rgba(252, 76, 2, 0.08) !important;
      backdrop-filter: blur(12px) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 14px rgba(252, 76, 2, 0.2), 0 0 30px rgba(252, 76, 2, 0.12) !important;
    }

    .strava-edit-preview-drop {
      margin-top: 10px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-6px);
      transition: max-height 0.28s ease, opacity 0.28s ease, transform 0.28s ease;
      border-radius: 10px;
      border: 1px solid rgba(252, 76, 2, 0.2);
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.08), rgba(252, 76, 2, 0.02));
    }

    .strava-edit-preview-drop.show {
      max-height: 120px;
      opacity: 1;
      transform: translateY(0);
    }

    .strava-edit-preview-inner {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
    }

    .strava-edit-preview-thumb {
      width: 60px;
      height: 60px;
      border-radius: 9px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }

    .strava-edit-preview-copy {
      min-width: 0;
      color: rgba(255,255,255,0.58);
      font-size: 0.72rem;
      line-height: 1.35;
    }

    @media (max-width: 640px) {
      .strava-connect-btn,
      .strava-action-btn {
        width: 100%;
      }

      .strava-connected-actions {
        width: 100%;
      }
      #stravaSyncSection {
        --strava-sync-divider-gap: 24px;
        --strava-sync-overlay-body-min: 148px;
        padding: 1.25rem !important;
      }

      #stravaSyncSection.strava-sync-section-syncing {
        padding-bottom: calc(var(--strava-sync-overlay-body-min) - var(--strava-sync-divider-gap)) !important;
      }

      .strava-sync-overlay {
        padding: var(--strava-sync-divider-gap, 24px) 1.25rem 1.5rem;
        border-radius: 0 0 22px 22px;
      }

      .strava-shoe-row {
        padding: 12px;
        grid-template-columns: 1fr;
        align-items: stretch;
      }

      .strava-shoe-image-wrap {
        width: 46px;
        height: 46px;
        border-radius: 9px;
      }

      .strava-shoe-text-col {
        min-width: 0;
      }

      .strava-shoe-text-main {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
      }

      .strava-shoe-bar-col {
        margin-top: 4px;
      }

      .strava-shoe-actions {
        width: 100%;
        margin-top: 4px;
        flex-direction: row;
      }

      .strava-shoe-actions button {
        min-width: 0 !important;
        width: auto;
        flex: 1 1 0;
      }

      .strava-shoe-raw {
        white-space: normal;
      }

      .strava-inline-edit-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .strava-inline-edit-actions {
        justify-content: stretch;
      }

      .strava-inline-edit-actions button {
        flex: 1 1 0;
      }
    }

    @media (max-width: 1024px) and (min-width: 641px) {
      .strava-shoe-row {
        grid-template-columns: minmax(0, 1.8fr) minmax(0, 2.6fr) minmax(0, 1.2fr);
        gap: 14px;
      }
    }

    @media (min-width: 768px) {
      .strava-shoe-raw {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .strava-shoe-actions button {
        width: 100%;
      }
    }

    @media (max-width: 767px) {
      .strava-stats-grid {
        grid-template-columns: 1fr;
      }

      .strava-trends-grid {
        grid-template-columns: 1fr;
      }

      .strava-skeleton-grid {
        grid-template-columns: 1fr;
      }

      .strava-trend-legend-label {
        font-size: 0.54rem;
      }

      .strava-trend-legend-value {
        font-size: 0.56rem;
      }

      .strava-trend-overlay-legend {
        width: 48px;
        right: 6px;
        top: 6px;
        bottom: 6px;
        padding: 2px 0;
      }
    }

    @media (max-width: 640px) {
      .strava-trend-legend-value {
        font-size: 0.5rem;
        letter-spacing: 0;
      }

      .strava-trend-overlay-legend {
        width: 38px;
      }
    }

    @keyframes stravaInlineEditReveal {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.995);
        filter: blur(1px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes stravaSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }




    #shoeOpinionsList {
      display: flex !important;
      flex-wrap: wrap !important;
      flex-direction: row !important;
      gap: 1rem;
      justify-content: flex-start;
      align-items: stretch;
      margin-bottom: 1.5rem;
    }


    #shoeOpinionsInnerSection.form-in-place #shoeOpinionsList {
      align-items: flex-start !important;
    }


    .shoe-opinion-card {
      flex: 0 0 auto !important;
      width: 220px !important;
      max-width: 260px;
      min-width: 200px;
    }

    @keyframes shoeOpinionCardEnter {
      from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .shoe-opinion-card--enter {
      animation: shoeOpinionCardEnter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes shoeOpinionCardExit {
      from {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      to {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
      }
    }

    .shoe-opinion-card--exit {
      animation: shoeOpinionCardExit 280ms ease-out both;
      pointer-events: none;
    }

    .shoe-opinion-card--removing {
      position: relative;
      pointer-events: none;
    }

    .shoe-opinion-card--removing > :not(.shoe-opinion-removal-state) {
      filter: blur(5px);
      opacity: 0.24;
      transition: filter 180ms ease, opacity 180ms ease;
    }

    .shoe-opinion-removal-state {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.94);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms ease, visibility 0s linear 180ms;
    }

    .shoe-opinion-card--removing .shoe-opinion-removal-state {
      opacity: 1;
      visibility: visible;
      transition: opacity 180ms ease;
    }

    .shoe-opinion-removal-state-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: transparent;
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .shoe-opinion-card--removing .shoe-opinion-removal-state-content {
      opacity: 1;
      transform: scale(1);
    }

    @keyframes shoeOpinionRemovalSpin {
      to { transform: rotate(360deg); }
    }

    .shoe-opinion-removal-spinner {
      width: 24px;
      height: 24px;
      border: 2px solid rgba(46, 209, 244, 0.28);
      border-top-color: #2ed1f4;
      border-radius: 999px;
      animation: shoeOpinionRemovalSpin 700ms linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .shoe-opinion-card--enter,
      .shoe-opinion-card--exit,
      .shoe-opinion-removal-spinner {
        animation: none;
      }
    }


    @media (min-width: 1024px) {
      .shoe-opinion-card {
        width: 240px !important;
      }
    }


    @media (max-width: 639px) {
      #shoeOpinionsList {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
        grid-auto-rows: 1fr !important;
        align-items: stretch !important;
      }

      .shoe-opinion-card {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        height: 242px !important;
        min-height: 242px !important;
        max-height: 242px !important;
        padding: 0.72rem 0.62rem 0.76rem !important;
        border-radius: 0.85rem !important;
      }

      .shoe-opinion-card.add-shoe-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 242px !important;
        min-height: 242px !important;
        max-height: 242px !important;
      }

      .shoe-opinion-card.add-shoe-card .add-shoe-button {
        height: 100% !important;
        min-height: 0 !important;
        gap: 10px !important;
        border-radius: 0.85rem !important;
      }

      .shoe-opinion-card .shoe-image-wrapper {
        height: 68px !important;
        margin-bottom: 0.35rem !important;
      }

      .shoe-opinion-card .shoe-image-wrapper img {
        max-width: 126px !important;
        max-height: 68px !important;
      }

      .shoe-opinion-card h3.shoe-name {
        font-size: 0.72rem !important;
        line-height: 1.14 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 2.3em;
      }

      .shoe-opinion-card .shoe-card-divider {
        margin: 4px 0 6px 0 !important;
      }

      .shoe-opinion-card .shoe-card-tags {
        gap: 4px !important;
        padding: 2px 2px 4px 2px !important;
      }

      .shoe-opinion-card .shoe-tag-item {
        font-size: 0.54rem !important;
        padding: 2px 5px !important;
      }

      .shoe-opinion-card .shoe-actions {
        width: 74% !important;
        padding-top: 6px !important;
      }

      .shoe-action-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 10px !important;
      }

      .shoe-opinion-card.add-shoe-card .add-shoe-plus {
        width: 48px !important;
        height: 48px !important;
        font-size: 38px !important;
      }

      .shoe-opinion-card.add-shoe-card .add-shoe-button span:last-child {
        font-size: 0.84rem !important;
        line-height: 1.1 !important;
      }

      .shoe-rate-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.16rem !important;
        border-radius: 9999px !important;
        border: 1px solid rgba(46, 209, 244, 0.4) !important;
        background: linear-gradient(180deg, rgba(46, 209, 244, 0.24), rgba(46, 209, 244, 0.13)) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(10, 65, 90, 0.18), 0 0 12px rgba(46, 209, 244, 0.12) !important;
        color: rgba(255, 255, 255, 0.96) !important;
        white-space: nowrap !important;
        min-height: 21px !important;
        padding: 0 6px !important;
        font-size: 0.43rem !important;
        font-weight: 500 !important;
        line-height: 1 !important;
      }

      .shoe-rate-btn span[aria-hidden="true"] {
        color: #facc15 !important;
        font-size: 0.58rem !important;
      }
    }


    .shoe-opinion-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      background: var(--color-dark, #001018) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      height: 300px;
      min-height: 300px;
      max-height: 300px;
      transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
    }


    .shoe-opinion-card[data-rating="purple"] {
      border-color: rgba(167, 139, 250, 0.35) !important;
    }
    .shoe-opinion-card[data-rating="purple"]:hover {
      border-color: rgba(167, 139, 250, 0.6) !important;
    }

    .shoe-opinion-card[data-rating="green"] {
      border-color: rgba(1, 195, 168, 0.35) !important;
    }
    .shoe-opinion-card[data-rating="green"]:hover {
      border-color: rgba(1, 195, 168, 0.6) !important;
    }

    .shoe-opinion-card[data-rating="yellow"] {
      border-color: rgba(255, 183, 65, 0.35) !important;
    }
    .shoe-opinion-card[data-rating="yellow"]:hover {
      border-color: rgba(255, 183, 65, 0.6) !important;
    }

    .shoe-opinion-card[data-rating="red"] {
      border-color: rgba(239, 68, 68, 0.35) !important;
    }
    .shoe-opinion-card[data-rating="red"]:hover {
      border-color: rgba(239, 68, 68, 0.6) !important;
    }

    /* Unrated shoes from Strava: cyan border + subtle pulse */
    .shoe-opinion-card[data-rating="needs-rating"] {
      border-color: rgba(46, 209, 244, 0.35) !important;
      box-shadow: 0 0 12px rgba(46, 209, 244, 0.08), 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    .shoe-opinion-card[data-rating="needs-rating"]:hover {
      border-color: rgba(46, 209, 244, 0.6) !important;
      box-shadow: 0 0 20px rgba(46, 209, 244, 0.15), 0 4px 12px rgba(0,0,0,0.1) !important;
    }


    .shoe-opinion-card.add-shoe-card {
      border-radius: 0.5rem !important;

      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
      opacity: 1;
      transform: translateY(0);
      will-change: opacity, transform;
      background: transparent !important;
      border: 0 !important;
      border-width: 0 !important;
      border-style: none !important;
      box-shadow: none !important;
      padding: 0 !important;
    }


    .shoe-opinion-card.add-shoe-card .add-shoe-button {
      width: 100%;
      height: 100%;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: 0.5rem;
      user-select: none;
      position: relative;

      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);

      box-shadow: inset 0px -6px 15px rgba(56, 230, 215, 0.25), inset 0px 6px 15px rgba(121, 241, 255, 0.25);
      transition: all 0.3s ease;
    }

    .shoe-opinion-card.add-shoe-card .shoe-card-content {
      justify-content: center;
    }


    .shoe-opinion-card.add-shoe-card .add-shoe-button::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 50%, rgba(46, 209, 244, 0.3) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .shoe-opinion-card.add-shoe-card .add-shoe-button,
    .shoe-opinion-card.add-shoe-card .add-shoe-button:visited {
      color: #fff;
      text-decoration: none;
    }

    .shoe-opinion-card.add-shoe-card:hover .add-shoe-button {

      background: linear-gradient(180deg, rgba(46, 209, 244, 0.12) 0%, rgba(46, 209, 244, 0.05) 100%);
      box-shadow: inset 0px -8px 20px rgba(56, 230, 215, 0.35), inset 0px 8px 20px rgba(121, 241, 255, 0.35);
      transform: translateY(-2px);
    }

    .shoe-opinion-card.add-shoe-card .add-shoe-plus {
      width: 56px;
      height: 56px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
      line-height: 1;
      font-weight: 300;
      color: #2ed1f4;
      background: rgba(46, 209, 244, 0.10);
      border: 1px solid rgba(46, 209, 244, 0.25);
    }

    .shoe-opinion-card.add-shoe-card.hiding {
      opacity: 0;
      transform: scale(0.97);
      pointer-events: none;
    }


    .shoe-opinion-card .metric-card-blur {
      position: absolute !important;
      inset: 0 !important;
      display: flex !important;
      align-items: flex-end !important;
      justify-content: center !important;
      pointer-events: none !important;
      z-index: 0 !important;
      overflow: hidden !important;
    }

    .shoe-opinion-card .metric-card-blur img {
      width: 100% !important;
      max-width: none !important;
      height: 180% !important;
      opacity: 0.25 !important;
      object-fit: cover !important;
      object-position: center bottom !important;
      pointer-events: none !important;
      display: block !important;
      filter: blur(32px) saturate(1.45) brightness(1.07) !important;
      transform: translateY(22%) scale(1.22) !important;
      mix-blend-mode: screen !important;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .shoe-opinion-card:hover .metric-card-blur img {
      opacity: 0.95 !important;
    }


    .shoe-opinion-card .shoe-card-content {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
    }


    .shoe-opinion-card .shoe-image-wrapper {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-bottom: 0.5rem;
    }

    .shoe-opinion-card .shoe-image-wrapper img {
      max-width: 160px;
      max-height: 85px;
      object-fit: contain;
    }


    .shoe-opinion-card h3.shoe-name {
      font-size: 0.805rem !important;
      font-weight: 600;
      color: white !important;
      margin-bottom: 0.25rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      animation: none !important;
    }


    .shoe-opinion-card .shoe-card-divider {
      width: 85%;
      height: 1px;
      margin: 6px 0 8px 0;
    }


    .shoe-opinion-card .shoe-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      justify-content: center;
      align-content: flex-start;
      padding: 4px 4px 6px 4px;
      overflow: hidden;
    }

    .shoe-opinion-card .shoe-tag-item {
      font-size: 0.58rem;
      padding: 2px 6px;
      border-radius: 9999px;
      white-space: nowrap;
      line-height: 1.3;
    }

    .shoe-rate-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.24rem;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 9999px;
      border: 1px solid rgba(46, 209, 244, 0.42);
      background: linear-gradient(180deg, rgba(46, 209, 244, 0.24), rgba(46, 209, 244, 0.12));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(10, 65, 90, 0.16), 0 0 14px rgba(46, 209, 244, 0.1);
      color: rgba(255, 255, 255, 0.96);
      cursor: pointer;
      font-size: 0.54rem;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .shoe-rate-btn span[aria-hidden="true"] {
      color: #facc15;
      font-size: 0.7rem;
      line-height: 1;
    }

    .shoe-rate-btn:hover {
      background: linear-gradient(180deg, rgba(46, 209, 244, 0.28), rgba(46, 209, 244, 0.16));
      border-color: rgba(46, 209, 244, 0.56);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 22px rgba(10, 65, 90, 0.2), 0 0 16px rgba(46, 209, 244, 0.16);
      transform: translateY(-1px);
    }

    .shoe-opinion-card .shoe-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      padding-top: 8px;
      margin-top: 6px;
      border-top: 1px solid rgba(255,255,255,0.08);
      width: 70%;
    }

    .shoe-action-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      opacity: 0.8;
      flex-shrink: 0;
    }

    .shoe-action-btn svg {
      width: 18px;
      height: 18px;
      display: block;
      flex-shrink: 0;
    }

    .shoe-action-btn.edit-btn {
      background: rgba(46, 209, 244, 0.12);
      border: 1px solid rgba(46, 209, 244, 0.25);
      color: #2ed1f4;
    }

    .shoe-action-btn.edit-btn:hover {
      background: rgba(46, 209, 244, 0.2);
      border-color: rgba(46, 209, 244, 0.4);
      opacity: 0.7;
    }

    .shoe-action-btn.delete-btn {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.25);
      color: #ef4444;
    }

    .shoe-action-btn.delete-btn:hover {
      background: rgba(239, 68, 68, 0.2);
      border-color: rgba(239, 68, 68, 0.4);
      opacity: 0.7;
    }


    .shoe-card-divider-h {
      display: none;
    }


    @media (max-width: 1023px) {
      .shoe-opinion-card {
        padding: 1.25rem;
      }

      .shoe-opinion-card .shoe-image-section img {
        max-width: 120px;
        max-height: 80px;
      }


      #profileCompletionWidget {
        width: auto;
        margin-top: 0;
        overflow: visible !important;
      }

      #completionScoreBtn {
        width: auto !important;
        min-width: unset !important;
        padding: 8px !important;
        gap: 0 !important;
      }


      #completionScoreBtn .completion-text-section {
        display: none !important;
      }


      #completionScoreBtn .completion-chevron {
        display: none !important;
      }

      #completionScoreBtn .completion-progress-ring {
        order: 1;
      }

      #completionDropdown {
        width: min(380px, calc(100vw - 32px)) !important;
        max-width: 380px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: visible !important;
      }
    }


    @media (min-width: 1024px) {
      #profileCompletionWidget {
        position: relative;
        overflow: visible !important;
      }

      #completionDropdown {
        margin: 0 !important;
        width: 420px !important;
        max-width: 420px !important;
        overflow: visible !important;
      }
    }


    #completionDropdown,
    #completionDropdownBox {
      overflow: visible !important;
    }

    #completionDropdown {
      z-index: 2147483646 !important;
    }

    .profile-completion-backdrop {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(2, 6, 23, 0.46) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: opacity 0.2s ease, visibility 0.2s ease !important;
      z-index: 2147483646 !important;
      touch-action: none !important;
    }

    .profile-completion-backdrop.is-open {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    @media (max-width: 1023px) {
      body.profile-completion-popup-open {
        overflow: hidden !important;
      }

      #completionDropdown.profile-completion-popup {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: min(92vw, 420px) !important;
        max-width: min(92vw, 420px) !important;
        max-height: min(72vh, 520px) !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        z-index: 2147483647 !important;
        -webkit-overflow-scrolling: touch !important;
      }

      #completionDropdown.profile-completion-popup::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #completionDropdown.profile-completion-popup #completionDropdownBox {
        border-radius: 18px !important;
        padding: 22px 20px !important;
      }

      #completionDropdown.profile-completion-popup .completion-dropdown-glow {
        display: none !important;
      }
    }


    #profileCompletionWidget,
    #profileCompletionWidget > * {
      overflow: visible !important;
    }




    .animate-in-hidden {
      opacity: 0;
      transform: translateY(20px);
    }


    .animate-in-visible {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }


    .animate-in-visible.stagger-1 { transition-delay: 0.15s; }
    .animate-in-visible.stagger-2 { transition-delay: 0.3s; }
    .animate-in-visible.stagger-3 { transition-delay: 0.45s; }
    .animate-in-visible.stagger-4 { transition-delay: 0.6s; }
    .animate-in-visible.stagger-5 { transition-delay: 0.75s; }


    #shoeOpinionsList {
      opacity: 0;
      transition: opacity 420ms ease-out;
    }

    #shoeOpinionsList.is-visible {
      opacity: 1;
    }


    #shoeOpinionsLoading {
      transition: opacity 0.5s ease;
    }


    #noShoesMessage {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    #noShoesMessage.is-visible {
      opacity: 1;
      transform: translateY(0);
    }


    #addShoeBtnContainer {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    #addShoeBtnContainer.is-visible {
      opacity: 1;
      transform: translateY(0);
    }


    #shoeOpinionsInnerSection {
      display: block;
    }


    #shoeOpinionsInnerSection.form-in-place #addShoeCard {
      display: none !important;
    }


    #shoeOpinionsInnerSection.form-in-place #addShoeForm {
      width: 100% !important;
      max-width: none !important;
    }

    #shoeOpinionsInnerSection.form-in-place #addShoeForm .grid {
      grid-template-columns: 1fr;
    }

    @media (max-width: 639px) {
      #shoeOpinionsInnerSection.form-in-place #addShoeForm .grid {
        grid-template-columns: 1fr;
      }
    }

    #shoeOpinionsInnerSection.form-in-place #addShoeForm {
      margin-top: 0 !important;
      padding-top: 0 !important;
      border-top: 0 !important;
    }


    #shoeOpinionsInnerSection.form-in-place {
      display: block !important;
    }

    #shoeOpinionsInnerSection.form-in-place #addShoeForm {
      padding-left: 0 !important;
      padding-right: 0 !important;
      transform: none !important;
    }

    #shoeOpinionsInnerSection.form-in-place #addShoeForm.active {
      padding: 0 !important;
      transform: none !important;
    }


    #shoeOpinionsInnerSection.form-in-place #noShoesMessage {
      display: none !important;
    }


    #shoeOpinionsInnerSection.form-in-place #addShoeForm.active {
      margin-top: 0 !important;
    }


    #completionScoreBtn {
      position: relative;
      isolation: isolate;
      transition: border-color 0.58s ease, box-shadow 0.58s ease;
    }

    #completionScoreBtn > :not(.completion-complete-surface) {
      position: relative;
      z-index: 1;
    }

    .completion-complete-surface {
      position: absolute;
      inset: -1px;
      z-index: 0;
      border: 1px solid transparent;
      border-radius: inherit;
      pointer-events: none;
      opacity: 0;
      background:
        linear-gradient(145deg, rgba(16, 27, 13, 0.94), rgba(7, 21, 37, 0.96)) padding-box,
        linear-gradient(105deg, #2ED1F4 0%, #4B7CFF 26%, #8B5CF6 50%, #B7FF00 76%, #2ED1F4 100%) border-box;
      transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #profileCompletionWidget.is-contributor-complete .completion-complete-surface {
      opacity: 1;
    }

    #completionProgressCircle {
      transition:
        stroke-dashoffset 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        stroke 0.58s cubic-bezier(0.22, 1, 0.36, 1) !important;
      will-change: stroke-dashoffset, stroke;
    }

    #profileCompletionWidget.is-loading #completionProgressCircle {
      opacity: 0;
      transition: none !important;
    }

    #profileCompletionWidget.is-loading .completion-progress-ring::after {
      content: '';
      position: absolute;
      inset: 4px;
      z-index: 2;
      border: 3px solid rgba(46, 209, 244, 0.18);
      border-top-color: #2ed1f4;
      border-right-color: rgba(151, 246, 255, 0.9);
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(46, 209, 244, 0.38);
      animation: profileCompletionLoadingSpin 0.78s linear infinite;
      pointer-events: none;
    }

    #profileCompletionWidget.is-loading #completionPercentText {
      visibility: hidden;
    }

    @keyframes profileCompletionLoadingSpin {
      to { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      #profileCompletionWidget.is-loading .completion-progress-ring::after {
        animation: none;
      }
    }
    #biometricsProgressBar,
    #shoeOpinionsProgressBar {
      transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    @keyframes profileContributorBorderMorph {
      from { background-position: 0% 50%; }
      to { background-position: 100% 50%; }
    }

    #profileCompletionWidget.is-contributor-complete #completionScoreBtn {
      border-color: rgba(183, 255, 0, 0.18) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 0 22px rgba(183, 255, 0, 0.12), 0 0 18px rgba(139, 92, 246, 0.08), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    #profileCompletionWidget.is-contributor-complete #completionScoreBtn:hover {
      box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 28px rgba(183, 255, 0, 0.18), 0 0 22px rgba(46, 209, 244, 0.1), inset 0 1px 0 rgba(255,255,255,0.1) !important;
    }

    #profileCompletionWidget .completion-progress-ring::before {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(183, 255, 0, 0.22), rgba(183, 255, 0, 0.07) 48%, transparent 72%);
      filter: blur(7px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1);
    }

    #profileCompletionWidget.is-contributor-complete .completion-progress-ring::before {
      opacity: 1;
    }

    #completionScoreBtn .completion-text-section h5,
    #completionStatus,
    #completionChevron path,
    #completionChevronMobile path {
      transition: color 0.58s ease, stroke 0.58s ease, text-shadow 0.58s ease;
    }

    #profileCompletionWidget.is-contributor-complete .completion-text-section h5,
    #profileCompletionWidget.is-contributor-complete #completionStatus {
      color: #E4FF9C !important;
      text-shadow: 0 0 14px rgba(183, 255, 0, 0.2);
    }

    #profileCompletionWidget.is-contributor-complete .completion-chevron path,
    #profileCompletionWidget.is-contributor-complete #completionChevronMobile path {
      stroke: #8B5CF6 !important;
    }

    #completionDropdown.is-contributor-complete #completionDropdownBox {
      border-color: transparent !important;
      background: linear-gradient(145deg, rgba(16, 27, 13, 0.98) 0%, rgba(7, 21, 37, 0.98) 58%, rgba(6, 16, 28, 0.98) 100%) !important;
      box-shadow: 0 24px 68px rgba(0,0,0,0.52), 0 0 0 1px rgba(183,255,0,0.08), 0 0 38px rgba(183,255,0,0.12), 0 0 26px rgba(139,92,246,0.08) !important;
    }

    #completionDropdown.is-contributor-complete #completionDropdownBox::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(105deg, #2ED1F4 0%, #4B7CFF 26%, #8B5CF6 50%, #B7FF00 76%, #2ED1F4 100%);
      background-size: 260% 100%;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: profileContributorBorderMorph 4.8s ease-in-out infinite alternate;
      pointer-events: none;
    }

    #completionDropdown.is-contributor-complete .completion-dropdown-glow {
      background:
        radial-gradient(circle at 18% 18%, rgba(46, 209, 244, 0.18), transparent 42%),
        radial-gradient(circle at 82% 24%, rgba(139, 92, 246, 0.16), transparent 45%),
        radial-gradient(circle at 66% 88%, rgba(183, 255, 0, 0.13), transparent 48%) !important;
      opacity: 0.95 !important;
    }

    #completionDropdown.is-contributor-complete .completion-score-large,
    #completionDropdown.is-contributor-complete .completion-category-percent {
      color: #B7FF00 !important;
      text-shadow: 0 0 18px rgba(183, 255, 0, 0.3) !important;
    }

    #completionDropdown.is-contributor-complete .completion-contributor-tagline {
      color: rgba(228, 255, 156, 0.82) !important;
    }

    #completionDropdown.is-contributor-complete .completion-category-card {
      background: rgba(11, 16, 32, 0.74) !important;
    }

    #completionDropdown.is-contributor-complete .completion-biometrics-card {
      border-color: rgba(46, 209, 244, 0.26) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 22px rgba(46,209,244,0.05);
    }

    #completionDropdown.is-contributor-complete .completion-shoes-card {
      border-color: rgba(139, 92, 246, 0.3) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 22px rgba(139,92,246,0.07);
    }

    #completionDropdown.is-contributor-complete .completion-biometrics-icon {
      background: rgba(46, 209, 244, 0.12) !important;
    }

    #completionDropdown.is-contributor-complete .completion-shoes-icon {
      background: rgba(46, 209, 244, 0.12) !important;
    }

    #completionDropdown.is-contributor-complete .completion-shoes-icon img {
      filter: brightness(0) saturate(100%) invert(71%) sepia(76%) saturate(2967%) hue-rotate(152deg) brightness(101%) contrast(101%) !important;
    }

    #completionDropdown.is-contributor-complete .completion-category-bar {
      background: linear-gradient(90deg, #2ED1F4 0%, #4B7CFF 34%, #8B5CF6 68%, #B7FF00 100%) !important;
      box-shadow: 0 0 8px rgba(46,209,244,0.45), 0 0 18px rgba(139,92,246,0.24), 0 0 24px rgba(183,255,0,0.14) !important;
    }

    #completionDropdown.is-contributor-complete .completion-contributor-footer {
      border-top-color: rgba(183, 255, 0, 0.18) !important;
    }

    @media (prefers-reduced-motion: reduce) {
      #completionDropdown.is-contributor-complete #completionDropdownBox::before {
        animation: none;
        background-position: 50% 50%;
      }
    }


    h1, h2 {
      position: relative;
      padding-bottom: 12px;
      display: inline-block;
    }

    h1::after, h2::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(46, 209, 244, 1) 0%, rgba(46, 209, 244, 0.88) 54%, rgba(46, 209, 244, 0.28) 82%, rgba(46, 209, 244, 0) 100%);
      animation: lineExpand 0.8s ease-out forwards;
      width: 0;
      box-shadow: 0 0 14px rgba(46, 209, 244, 0.32), 0 0 24px rgba(46, 209, 244, 0.12);
    }


    .metric-card h1::after, .metric-card h2::after, .metric-card h3::after,
    [class*="card"] h3::after, [class*="card"] h4::after, [class*="card"] h5::after, [class*="card"] h6::after,
    .rounded-lg h3::after, .rounded-lg h4::after, .rounded-lg h5::after, .rounded-lg h6::after {
      display: none;
    }

    @keyframes lineExpand {
      to {
        width: 130%;
      }
    }




    #biometricsForm input,
    #biometricsForm textarea,
    #biometricsForm select,
    #biometricsForm button,
    #biometricsForm .input-field {
      font-size: 16px !important;
      -webkit-text-size-adjust: 100% !important;
      line-height: 1.2 !important;
    }


      .input-field,
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="password"],
      input[type="search"],
      input[type="tel"],
      input[type="url"],
      select,
      textarea {
        width: 100%;
        min-height: clamp(44px, 10vw, 48px);
        padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem);
        font-size: 16px !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0.5rem;
        color: white;
        transition: all 0.2s;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
      }


      select.input-field,
      select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' fill-opacity='0.5' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right clamp(0.75rem, 2.5vw, 1rem) center;
        padding-right: clamp(2rem, 6vw, 2.5rem);
      }

      .input-field:focus,
      input:focus,
      select:focus,
      textarea:focus {
        outline: none;
        border-color: #2ed1f4;
        background: rgba(46, 209, 244, 0.05) !important;
        backdrop-filter: blur(12px) !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 18px rgba(46, 209, 244, 0.32), 0 0 40px rgba(46, 209, 244, 0.18) !important;
      }

      .strava-inline-edit-form .strava-edit-input,
      .strava-inline-edit-form input.strava-edit-input,
      .strava-inline-edit-form select.strava-edit-input {
        border-color: rgba(252, 76, 2, 0.46) !important;
        background-color: rgba(252, 76, 2, 0.055) !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 12px rgba(252, 76, 2, 0.14), 0 0 24px rgba(252, 76, 2, 0.07) !important;
      }

      .strava-inline-edit-form .strava-edit-input:focus,
      .strava-inline-edit-form input.strava-edit-input:focus,
      .strava-inline-edit-form select.strava-edit-input:focus {
        border-color: #FC4C02 !important;
        background: rgba(252, 76, 2, 0.08) !important;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.45), 0 0 14px rgba(252, 76, 2, 0.2), 0 0 30px rgba(252, 76, 2, 0.12) !important;
      }


      .input-field::placeholder,
      input::placeholder,
      textarea::placeholder {
        color: rgba(255, 255, 255, 0.4);
        font-size: 16px;
        opacity: 1;
      }


      select.input-field option,
      select option {
        background-color: #111827;
        color: white;
        font-size: 16px;
        padding: 0.5rem;
      }




      h1 {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
      }
      h2 {
        font-size: clamp(1.4rem, 4.5vw, 2rem) !important;
      }
      h3 {
        font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
      }
      h4 {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
      }
      h5 {
        font-size: clamp(0.875rem, 2.5vw, 1.125rem) !important;
      }
      h6 {
        font-size: clamp(0.75rem, 2vw, 1rem) !important;
      }


      p, .text-base {
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
      }


      .text-sm, small {
        font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
      }

      .text-xs {
        font-size: clamp(0.65rem, 1.8vw, 0.75rem) !important;
      }

      .text-lg {
        font-size: clamp(1rem, 3vw, 1.125rem) !important;
      }

      .text-xl {
        font-size: clamp(1.1rem, 3.5vw, 1.25rem) !important;
      }

      .text-2xl {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;
      }


      button:not(.icon-btn):not([class*="p-1"]):not([class*="p-2"]):not([class*="p-0"]):not(:has(svg:only-child)),
      .btn:not(.icon-btn),
      [type="submit"]:not(.icon-btn) {
        font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
      }


      button.text-sm:not(.icon-btn), .btn-sm:not(.icon-btn) {
        font-size: clamp(0.7rem, 2vw, 0.875rem) !important;
      }


      button.icon-btn,
      button:has(svg:only-child) {
        padding: revert !important;
        min-height: auto !important;
      }


      .shoe-action-btn {
        padding: 0 !important;
        min-height: 32px !important;
        width: 32px !important;
        height: 32px !important;
        opacity: 1 !important;
        z-index: 30 !important;
        position: relative !important;
        -webkit-appearance: none;
        appearance: none;
      }

      @media (max-width: 640px) {

        .shoe-action-btn {
          width: 36px !important;
          height: 36px !important;
          min-height: 36px !important;
        }

        .shoe-action-btn svg {
          width: 20px !important;
          height: 20px !important;
        }
      }


      label {
        font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important;
      }

      input, select, textarea {
        font-size: 16px !important;
      }

      @media (max-width: 767px) {
        .strava-inline-edit-form .strava-edit-input,
        .strava-inline-edit-form input.strava-edit-input,
        .strava-inline-edit-form select.strava-edit-input {
          font-size: 16px !important;
          -webkit-text-size-adjust: 100% !important;
        }
      }


      h1 + p, h2 + p, h3 + p, h4 + p {
        font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
      }


      @media (max-width: 640px) {

        h1, h2, h3, h4, h5, h6 {
          line-height: 1.2 !important;
        }


        h2 {
          font-size: clamp(1.6rem, 5vw, 2rem) !important;
        }

        p {
          line-height: 1.5 !important;
        }


      }

      .success-message {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #22c55e;
        margin-bottom: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        visibility: hidden;
        transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease, padding 0.4s ease, visibility 0.4s ease;
      }

      .success-message.active {
        max-height: 100px;
        padding: 16px;
        margin-bottom: 24px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }

      .profile-section-feedback {
        scroll-margin-top: 110px;
      }

      html.profile-feedback-revealing {
        overflow-anchor: none;
      }

      .error-message {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
        margin-bottom: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        visibility: hidden;
        transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-bottom 0.4s ease, padding 0.4s ease, visibility 0.4s ease;
      }

      .error-message.active {
        max-height: 100px;
        padding: 16px;
        margin-bottom: 24px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }


      .field-error {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #ef4444;
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        visibility: hidden;
        font-size: 0.875rem;
        transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease, padding 0.3s ease, visibility 0.3s ease;
      }

      .field-error svg {
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        flex-shrink: 0;
      }

      .field-error.active {
        max-height: 80px;
        padding: 12px;
        margin-top: 8px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
      }


      @media (max-width: 640px) {
        #headerCompletionDropdown {
          position: fixed !important;
          top: 70px !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
          min-width: 90vw !important;
          max-width: 340px !important;
          margin-top: 0 !important;
        }
      }


      @media (min-width: 641px) {
        #headerCompletionWidget {
          position: relative;
        }
        #headerCompletionDropdown {
          position: absolute !important;
          top: calc(100% + 10px) !important;
          left: 50% !important;
          right: auto !important;
          transform: translateX(-50%) !important;
        }
      }

      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }


      #shoeOpinionsSection {
        min-height: 120px;
      }


      .spinner-loader {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(46, 209, 244, 0.2);
        border-top-color: #2ed1f4;
        border-radius: 50%;
        animation: spinner-rotate 1s linear infinite;
      }

      @keyframes spinner-rotate {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

      .loading-text {
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.875rem;
      }



      #addShoeBtnContainer.hiding {
        opacity: 0 !important;
        transform: translateY(20px) !important;
        pointer-events: none;
      }


      #addShoeBtnContainer.has-shoes #addShoeBtnWrapper {
        display: block !important;
      }

      #addShoeBtnContainer.has-shoes #addShoeBtn,
      #addShoeBtnContainer.has-shoes #addShoeBtnMobile {
        width: 100%;
      }


      #addShoeBtn,
      #addShoeBtnMobile {
        padding: 12px 24px !important;
      }


      .shoe-card-divider-mobile {
        width: 80%;
        height: 1px;
        margin: 0 auto;
        background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.15) 80%, transparent 100%);
        display: none;
      }

      @media (max-width: 768px) {
        .shoe-card-divider-mobile {
          display: block;
        }
      }


      #addShoeForm {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-20px);
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    max-height 1s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-top 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        margin-top: 0;
        padding: 0 20px;
      }


      #shoeOpinionsInnerSection.form-in-place #addShoeForm {
        transform: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      #shoeOpinionsInnerSection.form-in-place #addShoeForm.active {
        margin-top: 0 !important;
        padding: 0 !important;
        transform: none !important;
      }

      #addShoeForm.active {
        max-height: 2200px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 32px;
        padding: 20px;
      }

      #addShoeForm.closing {
        max-height: 0;
        opacity: 0;
        transform: translateY(-20px);
        margin-top: 0;
        padding: 0 20px;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }


      .fade-in-element {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(-8px);
        transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
        margin-top: 0;
      }

      .fade-in-element.show {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
        margin-top: 20px;
      }


      #selectedShoeTag {
        transition: opacity 0.3s ease, transform 0.3s ease;
      }

      #selectedShoeTag.show {
        opacity: 1;
        transform: scale(1);
      }


      .shoe-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 4px;
        background: linear-gradient(135deg, rgba(20,20,30,0.98), rgba(15,15,25,0.98));
        backdrop-filter: blur(16px);
        border: 1px solid rgba(46, 209, 244, 0.3);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(46, 209, 244, 0.1);
        max-height: 320px;
        overflow-y: auto;
        z-index: 1000001;
        display: none;
      }

      .shoe-dropdown.active {
        display: block;
        animation: slideDown 0.2s ease;
      }

      .shoe-option {
        padding: 14px 18px;
        color: white;
        cursor: pointer;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        transition: all 0.15s ease;
        position: relative;
      }

      .shoe-option:hover {
        background: linear-gradient(90deg, rgba(46, 209, 244, 0.15), rgba(46, 209, 244, 0.05));
        border-left: 3px solid #2ed1f4;
        padding-left: 15px;
        box-shadow: inset 0 0 20px rgba(46, 209, 244, 0.1);
      }

      .shoe-option:last-child {
        border-bottom: none;
        border-radius: 0 0 12px 12px;
      }

      .shoe-option:first-child {
        border-radius: 12px 12px 0 0;
      }

      .shoe-option.add-new {
        background: linear-gradient(135deg, rgba(46, 209, 244, 0.1), rgba(46, 209, 244, 0.05));
        color: #2ed1f4;
        font-weight: 600;
        border-bottom: 2px solid rgba(46, 209, 244, 0.2);
      }

      .shoe-option.add-new:hover {
        background: linear-gradient(135deg, rgba(46, 209, 244, 0.2), rgba(46, 209, 244, 0.1));
        box-shadow: inset 0 0 30px rgba(46, 209, 244, 0.15);
      }


      .shoe-dropdown::-webkit-scrollbar {
        width: 8px;
      }

      .shoe-dropdown::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 0 12px 12px 0;
      }

      .shoe-dropdown::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(46, 209, 244, 0.6), rgba(46, 209, 244, 0.3));
        border-radius: 4px;
      }

      .shoe-dropdown::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(46, 209, 244, 0.8), rgba(46, 209, 244, 0.5));
      }