html, body {
      overflow-x: clip;
      max-width: 100%;
      min-height: 100vh;
    }

    html.profile-loading-lock,
    html.profile-loading-lock body,
    body.profile-loading-lock {
      overflow-y: auto;
      overscroll-behavior-y: auto;
      height: auto;
    }

    :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-sticky-overlay-bottom: rgba(3, 0, 20, 0.46);
      --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;
    }


    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
      }
      60% {
        opacity: 1;
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    /* Skeleton placeholder pulse while page is loading */
    @keyframes skeletonPulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 0.7; }
    }

    .fade-in-up {
      animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }

    /* Show skeleton placeholders immediately until CSS animations fire */
    .fade-in-up.skeleton-ready {
      opacity: 1;
      animation: none;
    }
    .fade-in-up.skeleton-ready > * { visibility: hidden; }
    .fade-in-up.skeleton-ready::before {
      content: '';
      display: block;
      height: 200px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      animation: skeletonPulse 1.5s ease-in-out infinite;
    }

    /* Once JS marks the page ready, remove skeleton and run normal animation */
    body.page-ready .fade-in-up {
      animation: fadeInUp 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
    }
    body.page-ready .fade-in-up.skeleton-ready > * { visibility: visible; }
    body.page-ready .fade-in-up.skeleton-ready::before { display: none; }

    /* Analytics sections that resolve after the Activity Log show their skeleton
       in place: the section keeps its real layout (plus placeholder markup from
       stryd-profile-page.js in containers that are empty until data renders), so
       each gray piece sits exactly where its content lands. The heading and
       divider stay real. Below them every line of text becomes a gray bar (a
       thick line-through), controls and charts become gray blocks, and card
       frames stay put. Bars and blocks share one solid fill, so bars drawn by
       nested text or inside a block never show as a second shade. */
    @keyframes profileSectionSkeletonSweep {
      from { transform: translateX(-110%); }
      to { transform: translateX(110%); }
    }
    .profile-section-skeleton {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 5;
      overflow: hidden;
      pointer-events: none;
    }
    [data-profile-section-state="loading"] {
      --profile-skel-fill: #20212f;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
      transform: none !important;
      animation: none !important;
      overflow: hidden !important;
    }
    [data-profile-section-state="loading"] > .profile-section-skeleton {
      display: block;
    }
    .profile-section-skeleton::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-110%);
      background: linear-gradient(90deg, transparent, rgba(46,209,244,0.13), transparent);
      animation: profileSectionSkeletonSweep 1.2s ease-in-out infinite;
    }
    /* Content below the heading and divider. */
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *) {
      color: transparent !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: none !important;
      caret-color: transparent !important;
      text-decoration-line: line-through !important;
      text-decoration-style: solid !important;
      text-decoration-color: var(--profile-skel-fill) !important;
      text-decoration-thickness: 0.62em !important;
    }
    /* Everything that is neither a card frame (the first classes in :not) nor a
       gray block (the rest, styled further down) drops its own paint, so only
       frames, blocks and text bars show. */
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *):not(.bio-cg-wrap, .drift-chart-card, .bio-efficiency-card, .bio-metric-card, .bio-sig-card, .bio-sig-dominant-panel, .bio-sig-panel, .bio-sig-explainer, .frp-controls-grid, .shoe-use-case-section, .frp-impact-metric, .rii-compare-btn, .bio-mobile-control-row, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-total-score-ring, .di-dropdown-trigger) {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;
      outline-color: transparent !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *)::before,
    :is([data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton), [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) *)::after,
    [data-profile-section-state="loading"] > :not(.profile-section-loading-heading, .drift-shell-divider, .profile-section-skeleton) :is(img, svg, canvas, video, picture, input, select, textarea) {
      visibility: hidden !important;
    }
    /* Small inline suffixes (units, "/100", arrows) keep their space but draw no
       bar, so each value reads as one bar instead of two at different baselines. */
    [data-profile-section-state="loading"] :is(.bio-efficiency-outof, .bio-card-unit, .bio-sig-total-score-value small, .frp-impact-arrow) {
      visibility: hidden !important;
    }
    /* Card frames keep their box but read neutral while data is pending. */
    [data-profile-section-state="loading"] .bio-metric-card {
      --card-glow-rgb: 148, 163, 184 !important;
    }
    [data-profile-section-state="loading"] .bio-sig-card,
    [data-profile-section-state="loading"] .bio-sig-dominant-panel,
    [data-profile-section-state="loading"] .bio-sig-panel,
    [data-profile-section-state="loading"] .bio-sig-explainer {
      border-color: rgba(148, 163, 184, 0.14) !important;
    }
    /* Controls, charts, pills and tiles become gray blocks of their own size. */
    [data-profile-section-state="loading"] :is(.rii-compare-btn, .bio-mobile-control-row, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, input[type="range"], .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-total-score-ring, .di-dropdown-trigger) {
      visibility: visible !important;
      background: var(--profile-skel-fill) !important;
      border-color: transparent !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      text-decoration-line: none !important;
    }
    [data-profile-section-state="loading"] :is(.rii-compare-btn, .bio-mobile-control-row, .bio-date-shell, .bio-select-shell, .drift-chart-container, .bio-slider-runs-dots, .bio-efficiency-rail, .drift-filter-pill, .env-tab-btn, .use-case-btn, .frp-matrix-tab, .rmt-cell, .bio-sig-dist-track, .bio-sig-icon-wrap, .bio-sig-metric-icon-box, .bio-sig-total-score-ring, .di-dropdown-trigger) * {
      visibility: hidden !important;
    }
    [data-profile-section-state="loading"] :is(.drift-chart-container, .bio-slider-runs-dots) {
      border-radius: 12px;
    }
    [data-profile-section-state="loading"] :is(input[type="range"], .bio-sig-total-score-ring) {
      border-radius: 999px;
    }
    [data-profile-section-state="loading"] input[type="range"]::-webkit-slider-runnable-track { background: transparent !important; box-shadow: none !important; }
    [data-profile-section-state="loading"] input[type="range"]::-moz-range-track { background: transparent !important; box-shadow: none !important; }
    [data-profile-section-state="loading"] input[type="range"]::-webkit-slider-thumb { visibility: hidden !important; }
    [data-profile-section-state="loading"] input[type="range"]::-moz-range-thumb { visibility: hidden !important; }
    /* Cards already carry their reveal classes while the skeleton shows; they
       must not slide in underneath it. The section reveal still plays on release. */
    [data-profile-section-state="loading"] .reveal-child {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    /* The HR card spans the row below 1024px (see .bio-metric-card[data-bio-metric="hr"]). */
    @media (min-width: 1024px) {
      .bio-metric-card[data-profile-skel-metric="hr"] { grid-column: auto; }
    }
    @media (max-width: 1023px) {
      .bio-metric-card[data-profile-skel-metric="hr"] { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-section-skeleton::after { animation: 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; }

    /* ═══ Premium Scroll-Reveal Animation System ═══ */
    /* Sections start hidden, revealed by IntersectionObserver */
    .section-reveal {
      opacity: 0;
        visibility: hidden;
        pointer-events: none;
      transform: translateY(32px);
      transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .section-reveal.is-visible {
      opacity: 1;
        visibility: visible;
        pointer-events: auto;
      transform: translateY(0);
    }
      .section-reveal.fade-in-up,
      body.page-ready .section-reveal.fade-in-up {
        animation: none;
      }
    /* Staggered children within a revealed section */
    .reveal-child {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .reveal-child.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-child.stagger-1 { transition-delay: 0.1s; }
    .reveal-child.stagger-2 { transition-delay: 0.2s; }
    .reveal-child.stagger-3 { transition-delay: 0.3s; }
    .reveal-child.stagger-4 { transition-delay: 0.4s; }
    .reveal-child.stagger-5 { transition-delay: 0.5s; }
    .reveal-child.stagger-6 { transition-delay: 0.6s; }

    /* Data section entrance - used when sections go from display:none to visible */
    @keyframes sectionEntrance {
      from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    .section-entrance {
      animation: sectionEntrance 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    }

    /* ═══ Enhanced Card Hover & Interaction ═══ */
    .drift-chart-card {
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s ease;
    }
    @media (hover: hover) and (pointer: fine) {
      .drift-chart-card:hover {
        transform: none;
        box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
        border-color: rgba(34, 211, 238, 0.14);
      }
    }

    /* ═══ Premium Button Polish ═══ */
    /* Smoother base transition for all interactive buttons */
    .load-type-btn,
    .env-tab-btn,
    .use-case-btn,
    .drift-chart-reset,
    .drift-window-reset-btn,
    .drift-window-save-btn,
    .dw-nudge-btn {
      transition: background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    /* Active tab indicator glow */
    .load-type-btn.active,
    .env-tab-btn.active {
      box-shadow: 0 0 14px rgba(var(--btn-color-rgb, 34,211,238), 0.22),
                  inset 0px -5px 12px rgba(var(--btn-color-rgb, 34,211,238), 0.2),
                  inset 0px 5px 12px rgba(var(--btn-color-rgb, 34,211,238), 0.1),
                  inset 0 1px 0 rgba(255,255,255,0.05);
    }

    /* Use-case button active glow */
    .use-case-btn.active {
      box-shadow: 0 0 14px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    /* Section header icon pulse on entrance */
    @keyframes iconGlowPulse {
      0% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.3)); }
      50% { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.6)); }
      100% { filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.3)); }
    }
    .section-entrance .section-header-icon {
      animation: iconGlowPulse 1.5s ease-in-out 0.3s 1;
    }

    /* Smooth h2 underline for data sections appearing */
    .section-entrance h2::after {
      animation-delay: 0.3s;
    }

    /* ═══ Reduced Motion ═══ */
    @media (prefers-reduced-motion: reduce) {
      .section-reveal,
      .reveal-child,
      .section-entrance,
      .drift-chart-card {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
      }
    }


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


    .hover-trigger:hover .hover-tooltip {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }


    .section-tooltip {
      position: absolute;
      left: 0;
      top: 100%;
      margin-top: 12px;
      min-width: 280px;
      max-width: 400px;
      padding: 16px;
      border-radius: 16px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                  transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                  visibility 0.35s;
      transform: translateY(10px);
      pointer-events: none;
      background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
        0 0 30px rgba(34, 211, 238, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
      z-index: 999999 !important;
    }

    .section-tooltip-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, 0.42);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.35s;
      z-index: 2147483646;
    }

    .section-tooltip-backdrop.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }


    .section-tooltip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: linear-gradient(to right, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.05));
      filter: blur(20px);
      opacity: 0.5;
      pointer-events: none;
      z-index: -1;
    }


    .section-tooltip::after {
      content: '';
      position: absolute;
      top: -6px;
      left: 20px;
      width: 12px;
      height: 12px;
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      transform: rotate(45deg);
    }


    @media (max-width: 640px) {

      .section-tooltip {
        position: fixed !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: min(92vw, 420px) !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 2147483647 !important;
        transition: opacity 0.18s ease, visibility 0.18s ease !important;
      }

      .section-tooltip::after {
        display: none;
      }
    }

    .section-tooltip-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }


    .section-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      line-height: 1;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }

    .section-tooltip-trigger svg {
      color: #2ed1f4;
      transition: all 0.3s ease;
      pointer-events: auto;
      filter: drop-shadow(0 0 4px rgba(46, 209, 244, 0.3));
    }

    .section-tooltip-trigger:hover svg,
    .section-tooltip-btn:focus-visible svg,
    .section-tooltip-trigger.tooltip-active svg {
      transform: scale(1.15);
      filter: drop-shadow(0 0 8px rgba(46, 209, 244, 0.5));
    }

    .section-tooltip-btn:focus-visible {
      outline: none;
    }


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


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


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


    .section-tooltip {
      z-index: 2147483647 !important;
    }

    @media (max-width: 640px) {
      .section-tooltip.tooltip-open,
      .section-tooltip-trigger.tooltip-active .section-tooltip {
        transform: translate(-50%, -50%) !important;
      }
    }


    .section-tooltip a {
      pointer-events: auto;
      transition: opacity 0.25s ease, text-shadow 0.25s ease;
    }

    .section-tooltip a:hover {
      opacity: 0.8;
      text-shadow: 0 0 8px currentColor;
    }


    .section-tooltip p {
      position: relative;
    }

    .section-tooltip h5 {
      position: relative;
    }




    .input-field {
      width: 100%;
      min-height: clamp(44px, 10vw, 48px);
      padding: clamp(0.625rem, 2vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem);
      font-size: clamp(0.875rem, 2.5vw, 1rem) !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: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      box-sizing: border-box;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    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%;
      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,
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus {
      outline: none;
      border-color: #22d3ee;
      background: rgba(34, 211, 238, 0.05) !important;
      backdrop-filter: blur(12px) !important;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.5), 0 0 15px rgba(34, 211, 238, 0.15), 0 0 30px rgba(34, 211, 238, 0.1) !important;
    }


    .input-field::placeholder,
    input::placeholder,
    textarea::placeholder {
      color: rgba(255, 255, 255, 0.4);
      font-size: clamp(0.8rem, 2.3vw, 0.95rem);
      opacity: 1;
    }


    select.input-field option,
    select option {
      background-color: #111827;
      color: white;
      font-size: clamp(0.875rem, 2.5vw, 1rem);
      padding: 0.5rem;
    }




    h1 {
      font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    }
    h2 {
      font-size: clamp(1.25rem, 4vw, 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;
    }

    .page-title {
      display: inline-block;
      position: relative;
      padding-bottom: 12px;
      margin-bottom: 12px;
      font-size: clamp(1.6rem, 5vw, 2.25rem) !important;
      line-height: 1.15;
    }

    .page-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 0;
      background: linear-gradient(90deg, #2ed1f4 0%, #2ed1f4 60%, transparent 100%);
      box-shadow: 0 0 8px rgba(46, 209, 244, 0.4);
      animation: lineExpand 0.8s ease-out forwards;
    }


    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[class*="p-1"],
    button[class*="p-2"],
    button[class*="p-0"],
    button:has(svg:only-child) {
      padding: revert !important;
      min-height: auto !important;
    }


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

    input, select, textarea {
      font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    }


    .card-title, .section-title {
      font-size: clamp(1rem, 3vw, 1.25rem) !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;
        }

        p {
          line-height: 1.5 !important;
        }




        #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;
        }

        #runTypeButtons {
          flex-wrap: nowrap !important;
          gap: 6px !important;
        }

        #runTypeButtons button {
          min-width: 0 !important;
          padding: 6px 8px !important;
          font-size: 0.78rem !important;
          white-space: nowrap;
        }
      }


      @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;
        }
      }
    .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(34, 211, 238, 0.3);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(34, 211, 238, 0.1);
      max-height: 320px;
      overflow-y: auto;
      z-index: 99999;
      display: none;
    }


    #watchDropdown.shoe-dropdown {
      background: linear-gradient(135deg, rgba(20,20,30,0.98), rgba(15,15,25,0.98)) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(34, 211, 238, 0.1) !important;
      backdrop-filter: blur(16px) !important;
    }

    .shoe-dropdown.active {
      display: block;
      animation: slideDown 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

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

    .shoe-option {
      padding: 14px 18px;
      color: white;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      transition: background 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-left 0.25s ease,
                  padding-left 0.25s ease,
                  box-shadow 0.25s ease;
      position: relative;
    }

    .shoe-option:hover {
      background: linear-gradient(90deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05));
      border-left: 3px solid #22d3ee;
      padding-left: 15px;
      box-shadow: inset 0 0 20px rgba(34, 211, 238, 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(34, 211, 238, 0.1), rgba(34, 211, 238, 0.05));
      color: #22d3ee;
      font-weight: 600;
      border-bottom: 2px solid rgba(34, 211, 238, 0.2);
    }

    .shoe-option.add-new:hover {
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.1));
      box-shadow: inset 0 0 30px rgba(34, 211, 238, 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(34, 211, 238, 0.6), rgba(34, 211, 238, 0.3));
      border-radius: 4px;
    }

    .shoe-dropdown::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.8), rgba(34, 211, 238, 0.5));
    }


    .selected-shoes {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .shoe-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      padding-bottom: 8px;
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.08));
      border: 1px solid rgba(34, 211, 238, 0.3);
      border-radius: 6px;
      color: white;
      font-size: 14px;
      overflow: visible;
    }

    .shoe-tag.has-image {
      padding-bottom: 6px;
    }

    .shoe-tag-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, transparent 0%, rgba(34, 211, 238, 0.3) 10%, rgba(34, 211, 238, 0.3) 90%, transparent 100%);
      margin-top: 4px;
    }

    .shoe-tag-image {
      display: flex;
      justify-content: center;
      margin-top: 6px;
    }

    .shoe-tag button {
      background: none;
      border: none;
      color: #22d3ee;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .shoe-tag button:hover {
      color: #22d3ee;
      transform: scale(1.2);
    }


    .max-shoes-toast {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) translateY(-100px);
      z-index: 999999;
      padding: 16px 24px;
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
      backdrop-filter: blur(12px);
      border: 1px solid rgba(239, 68, 68, 0.5);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.3);
      opacity: 0;
      transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .max-shoes-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .max-shoes-toast .toast-content {
      display: flex;
      align-items: center;
      gap: 12px;
      color: white;
    }

    .max-shoes-toast .toast-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      color: #fee2e2;
      filter: drop-shadow(0 0 8px rgba(254,226,226,0.28));
    }

    .max-shoes-toast .toast-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .max-shoes-toast .toast-message {
      font-size: 14px;
      font-weight: 500;
      max-width: 400px;
    }

    @media (max-width: 640px) {
      .max-shoes-toast {
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-100px);
        width: auto;
      }
      .max-shoes-toast.show {
        transform: translateX(0) translateY(0);
      }
      .max-shoes-toast .toast-message {
        max-width: none;
      }
      .activity-shoe-editor-modal {
        padding: 18px;
      }
    }


    .fade-in-element {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-top: 0;
    }

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

    #wornShoeFeedback {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), margin-top 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
      margin-top: 0;
    }

    #wornShoeFeedback.active {
      max-height: 800px;
      opacity: 1;
      transform: translateY(0);
      margin-top: 120px;
    }

    #selectedWornShoe.has-image + #wornShoeFeedback.active {
      margin-top: 16px;
    }


    #dropZone {
      opacity: 1;
      max-height: 300px;
      overflow: hidden;
      transform: translateY(0);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
      margin-bottom: 0;
    }

    #dropZone.hidden {
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
      margin-bottom: 0;
    }

    #fileInfo {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      transform: translateY(-10px);
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      display: none;
    }

    #fileInfo.active {
      opacity: 1;
      max-height: 100px;
      transform: translateY(0);
      display: flex;
    }

    #fileInfo.removing {
      opacity: 0 !important;
      max-height: 0 !important;
      transform: translateY(-10px) scale(0.95) !important;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                  max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
      display: flex !important;
    }

    /* -- Data Processing Section - Logo Spinner -- */
    .proc-logo-spinner-wrap {
      position: relative;
      width: 120px;
      height: 120px;
      margin: 0 auto 16px;
      overflow: visible;
    }
    .proc-logo-spinner-wrap img {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      height: 32px;
      z-index: 10;
      filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.5));
    }
    .proc-logo-spinner-wrap .proc-logo-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 80px; height: 80px;
      background: radial-gradient(circle, rgba(34, 211, 238, 0.18) 0%, transparent 70%);
      border-radius: 50%;
    }
    .proc-logo-spinner-wrap svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      transform: rotate(-90deg);
      z-index: 2;
    }
    /* Magic UI Ripple - two rings behind the logo */
    @keyframes procRipplePulse {
      0%, 100% { transform: translate(-50%, -50%) scale(0.96); opacity: 0.5; }
      50%       { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
    }
    @keyframes procRippleGlow {
      0%, 100% { box-shadow: 0 0  4px 0px rgba(34, 211, 238, 0.10), inset 0 0 2px rgba(34, 211, 238, 0.03); }
      50%       { box-shadow: 0 0 14px 4px rgba(34, 211, 238, 0.45), inset 0 0 8px rgba(34, 211, 238, 0.10); }
    }
    .proc-ripple-ring {
      position: absolute;
      top: 50%; left: 50%;
      /* translate is here in the base so rings stay centred during any animation delay */
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1.5px solid rgba(34, 211, 238, 0.70);
      background: transparent;
      animation: procRipplePulse 4s ease-in-out infinite, procRippleGlow 4s ease-in-out infinite;
      animation-fill-mode: backwards;
      pointer-events: none;
      z-index: 0;
    }
    /* inner ring: child 2; outer ring: child 3 */
    .proc-ripple-ring:nth-child(2) { width: 104px; height: 104px; animation-delay: 0s; }
    .proc-ripple-ring:nth-child(3) { width: 136px; height: 136px; animation-delay: 0.6s; border-color: rgba(34, 211, 238, 0.40); }

    /* -- Activity Overview Table -- */
    .activity-overview-section {
      margin-top: 12px;
      padding: 14px;
      border-radius: 14px;
      background: linear-gradient(140deg, rgba(34, 211, 238, 0.08), rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.01));
      border: 1px solid rgba(34, 211, 238, 0.15);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.05);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.16s ease-out, transform 0.16s ease-out;
    }
    .activity-overview-section.ao-section-visible {
      opacity: 1;
      transform: translateY(0);
    }
    @keyframes profileResultsBriefReveal {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .profile-results-brief-reveal {
      animation: profileResultsBriefReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .post-processing-overview-card-prepare {
      opacity: 0;
      transform: translateY(12px);
    }
    @keyframes postProcessingOverviewCardReveal {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .post-processing-overview-card-reveal {
      animation: postProcessingOverviewCardReveal 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) both;
    }
    .activity-overview-section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: 10px;
    }
    .activity-overview-wrap {
      position: relative;
      max-height: 280px;
      overflow-x: hidden;
      overflow-y: auto;
      transition: box-shadow 0.18s ease;
      overscroll-behavior-y: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(34, 211, 238, 0.3) transparent;
    }
    .activity-overview-wrap.ao-fade-bottom {
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
    }
    .activity-overview-wrap.ao-fade-bottom.ao-at-bottom {
      -webkit-mask-image: none;
      mask-image: none;
    }
    .activity-overview-wrap::-webkit-scrollbar { width: 5px; }
    .activity-overview-wrap::-webkit-scrollbar-track { background: transparent; }
    .activity-overview-wrap::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.25); border-radius: 3px; }
    .activity-overview-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    .activity-overview-table thead {
      position: relative;
      z-index: 90;
    }
    .activity-overview-table thead tr {
      position: relative;
      z-index: 90;
      background: transparent;
    }
    .activity-overview-table thead tr th {
      position: sticky;
      top: 0;
      z-index: 90;
      text-align: left;
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      color: rgba(255,255,255,0.55);
      padding: 9px 10px;
      background: rgb(10, 20, 38);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      white-space: nowrap;
      box-shadow: 0 2px 0 rgba(10, 20, 38, 0.95);
    }
    .activity-overview-table thead tr th:first-child {
      border-left: 1px solid rgba(255,255,255,0.08);
      border-radius: 10px 0 0 10px;
    }
    .activity-overview-table thead tr th:last-child  {
      border-right: 1px solid rgba(255,255,255,0.08);
      border-radius: 0 10px 10px 0;
    }
    .activity-overview-table thead tr th .ao-head-chip {
      display: inline;
      line-height: 1;
    }
    .activity-overview-table tbody::before {
      content: '';
      display: block;
      height: 8px;
    }
    .activity-overview-table td {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      padding: 7px 10px;
      white-space: nowrap;
      border-top: 1px solid rgba(255,255,255,0.03);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ao-date-button {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      max-width: 100%;
      min-height: 28px;
      padding: 4px 7px 4px 8px;
      border: 1px solid rgba(34, 211, 238, 0.18);
      border-radius: 8px;
      background: rgba(34, 211, 238, 0.055);
      color: inherit;
      font: inherit;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    .ao-date-button:hover {
      color: #e6fbff;
      border-color: rgba(34, 211, 238, 0.48);
      background: rgba(34, 211, 238, 0.12);
      box-shadow: 0 0 16px rgba(34, 211, 238, 0.10), inset 0 1px 0 rgba(255,255,255,0.06);
      transform: translateY(-1px);
    }
    .ao-date-button:focus-visible {
      outline: 2px solid rgba(34, 211, 238, 0.82);
      outline-offset: 2px;
      border-color: rgba(34, 211, 238, 0.58);
    }
    .ao-date-button-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ao-date-button-icon {
      width: 12px;
      height: 12px;
      flex: 0 0 auto;
      color: #22d3ee;
      transition: transform 0.18s ease;
    }
    .ao-date-button:hover .ao-date-button-icon {
      transform: translate(1px, -1px);
    }
    @media (min-width: 769px) {
      .activity-overview-table col.ao-col-date {
        width: 13% !important;
      }
      .activity-overview-table col.ao-col-device {
        width: 18% !important;
      }
      .activity-overview-table th.ao-col-date,
      .activity-overview-table td.ao-col-date {
        padding-inline: 6px;
        overflow: visible;
        text-overflow: clip;
      }
      .ao-date-button {
        gap: 4px;
        padding-inline: 6px;
        width: max-content;
        max-width: none;
        font-size: 11px;
      }
      .ao-date-button-label {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
      }
    }
    .activity-overview-table td.ao-col-device {
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .activity-overview-table td.ao-col-drift,
    .activity-overview-table td.ao-col-category,
    .activity-overview-table td.ao-col-shoe {
      text-overflow: clip;
      overflow: visible;
    }
    .activity-overview-table tbody {
      position: relative;
      z-index: 1;
    }
    .activity-overview-table tbody tr {
      position: relative;
      z-index: 1;
    }
    .activity-overview-table tbody tr:hover,
    .activity-overview-table tbody tr:focus-within {
      z-index: 40;
    }
    .activity-overview-table td.ao-col-drift {
      position: relative;
      z-index: 6;
    }
    .activity-overview-table tbody tr:hover td.ao-col-drift,
    .activity-overview-table tbody tr:focus-within td.ao-col-drift {
      z-index: 50;
    }
    .ao-category-cell {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      max-width: 100%;
    }
    .activity-overview-table tr:first-child td { border-top: none; }
    .activity-overview-table tr.ao-row-qualifying td { color: rgba(255,255,255,0.85); }
    .activity-overview-table tr.ao-row-discard td { color: rgba(255,255,255,0.4); }
    .activity-overview-table tr.ao-row-other td { color: rgba(255,255,255,0.35); }
    .ao-pill {
      display: inline-block;
      padding: 2px 7px;
      border-radius: 5px;
      font-size: 10px;
      font-weight: 600;
      text-transform: capitalize;
      letter-spacing: 0.02em;
    }
    .ao-pill-daily   { background: rgba(59,130,246,.12); color: #3b82f6; border: 1px solid rgba(59,130,246,.15); }
    .ao-pill-tempo   { background: rgba(249,115,22,.12); color: #f97316; border: 1px solid rgba(249,115,22,.15); }
    .ao-pill-race    { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.15); }
    .ao-pill-longrun { background: rgba(34, 211, 238,.12); color: #06b6d4; border: 1px solid rgba(34, 211, 238,.15); }
    .ao-pill-interval { background: rgba(234,179,8,.12); color: #eab308; border: 1px solid rgba(234,179,8,.15); }
    .ao-pill-discard { background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.06); }
    /* Freshness pills for activity feed */
    .ao-pill-fresh { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.2); }
    .ao-pill-moderate { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
    .ao-pill-fatigued { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.2); }
    .ao-drift-cell { display: flex; flex-direction: column; gap: 2px; font-size: 0.7rem; }
    .ao-drift-primary { color: rgba(255,255,255,0.8); font-weight: 600; }
    .ao-drift-secondary { color: rgba(255,255,255,0.35); font-size: 0.65rem; }
    .ao-drift-green { color: #34d399; font-weight: 600; }
    .ao-drift-yellow { color: #fbbf24; font-weight: 600; }
    .ao-drift-red { color: #f87171; font-weight: 600; }
    .ao-drift-neutral { color: rgba(255,255,255,0.45); font-weight: 600; }
    .ao-toggle-cell { text-align: center; vertical-align: middle; padding: 0 4px; }
    /* ao-run-toggle - see .rii-toggle + .rii-toggle-label--sm in dashboard-embed.css */
    .activity-overview-table tr.ao-excluded td:not(.ao-toggle-cell) { opacity: 0.32; }
    .activity-overview-table tr.ao-excluded td.ao-col-drift { opacity: 1; }
    .ao-form-th-wrap { display: inline-flex; align-items: center; gap: 4px; }
    .ao-form-info-icon {
      position: relative;
      color: rgba(255,255,255,0.35);
      font-size: 0.7rem;
      cursor: help;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      touch-action: manipulation;
      transition: color 0.15s ease;
    }
    .ao-form-info-icon:hover,
    .ao-form-info-icon:focus-visible,
    .ao-form-info-icon.ao-tooltip-active {
      color: rgba(255,255,255,0.72);
      outline: none;
    }
    .ao-form-info-icon::after { content: none; }
    .ao-floating-tooltip {
      position: fixed;
      left: 0;
      top: 0;
      max-width: min(280px, calc(100vw - 24px));
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(10, 20, 38, 0.98);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 12px 32px rgba(0,0,0,0.35);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: rgba(255,255,255,0.86);
      font-size: 0.68rem;
      line-height: 1.45;
      text-align: left;
      white-space: pre-line;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
      z-index: 2147483647;
    }
    .ao-floating-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    /* Drift pill tags */
    .ao-drift-cell { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.65rem; position: relative; z-index: 1; isolation: isolate; }
    .ao-drift-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 1px 6px;
      border-radius: 6px;
      font-weight: 600;
      border: 0.5px solid rgba(255,255,255,0.16);
      font-size: 0.62rem;
      line-height: 1.5;
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ao-drift-tag.ao-drift-tag--icon { padding: 3px 5px; min-width: 22px; }
    .ao-drift-tag.ao-drift-tag--excluded {
      min-width: 58px;
      padding: 3px 9px;
      font-size: 0.62rem;
      text-transform: none;
    }
    .ao-drift-icon { width: 11px; height: 11px; display: block; color: currentColor; }
    .ao-drift-icon--gct {
      background-color: currentColor;
      -webkit-mask-image: url('/images/gct.svg');
      mask-image: url('/images/gct.svg');
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .ao-drift-tag.ao-drift-green {
      color: #34d399;
      background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(255,255,255,0.02));
      border-color: rgba(52,211,153,0.30);
    }
    .ao-drift-tag.ao-drift-yellow {
      color: #fbbf24;
      background: linear-gradient(135deg, rgba(251,191,36,0.10), rgba(255,255,255,0.02));
      border-color: rgba(251,191,36,0.30);
    }
    .ao-drift-tag.ao-drift-red {
      color: #f87171;
      background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(255,255,255,0.02));
      border-color: rgba(248,113,113,0.30);
    }
    .ao-drift-tag.ao-drift-neutral {
      color: rgba(255,255,255,0.44);
      background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border-color: rgba(255,255,255,0.16);
    }
    .ao-drift-tag.ao-drift-blue {
      color: #60a5fa;
      background: linear-gradient(135deg, rgba(96,165,250,0.12), rgba(255,255,255,0.02));
      border-color: rgba(96,165,250,0.34);
    }
    .ao-drift-tag.ao-drift-orange {
      color: #fb923c;
      background: linear-gradient(135deg, rgba(251,146,60,0.12), rgba(255,255,255,0.02));
      border-color: rgba(251,146,60,0.34);
    }
    .ao-drift-tag.ao-drift-cyan {
      color: #22d3ee;
      background: linear-gradient(135deg, rgba(46, 209, 244,0.12), rgba(255,255,255,0.02));
      border-color: rgba(46, 209, 244,0.34);
    }
    .ao-drift-tag.ao-drift-tag--conf {
      min-width: 22px;
      padding: 3px 5px;
    }
    .ao-drift-conf-symbol {
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.01em;
    }
    .ao-drift-loading-spinner {
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1.5px solid rgba(148,163,184,0.28);
      border-top-color: #22d3ee;
      border-radius: 50%;
      animation: aoDriftLoadingSpin 0.72s linear infinite;
      box-sizing: border-box;
    }
    @keyframes aoDriftLoadingSpin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-results-brief-reveal,
      .post-processing-overview-card-prepare,
      .post-processing-overview-card-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
      .activity-overview-section { transition: none !important; }
      .ao-drift-loading-spinner { animation: none !important; }
    }
    .ao-category-tag {
        --ao-category-tone: 186, 197, 214;
        justify-content: flex-start;
        max-width: 100%;
          padding: 3px 10px;
          border-radius: 10px;
        text-transform: none;
          letter-spacing: 0.012em;
          font-size: inherit;
          font-weight: inherit;
          line-height: 1.2;
          color: rgba(255,255,255,0.92) !important;
        border-color: rgba(255,255,255,0.1);
          background: linear-gradient(135deg, rgba(var(--ao-category-tone), 0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.04),
            inset 0 0 0 1px rgba(var(--ao-category-tone), 0.065);
      }
      .ao-category-tag::before {
          display: none;
      }
      .ao-category-tag.ao-drift-neutral {
        --ao-category-tone: 186, 197, 214;
          border-color: rgba(148,163,184,0.18);
      }
      .ao-category-tag.ao-drift-blue {
        --ao-category-tone: 96, 165, 250;
          border-color: rgba(96,165,250,0.24);
          background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .ao-category-tag.ao-drift-orange {
        --ao-category-tone: 251, 146, 60;
          border-color: rgba(251,146,60,0.24);
          background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .ao-category-tag.ao-drift-red {
        --ao-category-tone: 248, 113, 113;
          border-color: rgba(248,113,113,0.24);
          background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .ao-category-tag.ao-drift-cyan {
        --ao-category-tone: 46, 209, 244;
          border-color: rgba(46,209,244,0.24);
          background: linear-gradient(135deg, rgba(46,209,244,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .ao-category-tag.ao-drift-yellow {
        --ao-category-tone: 251, 191, 36;
          border-color: rgba(251,191,36,0.24);
          background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    /* Report-style indicator hover + tooltip interaction */
    .metric-indicator-clickable {
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      transition: box-shadow 0.12s ease-in-out;
    }
    /* Extend hover hit-area so border hovers don't rapidly enter/leave while animating */
    .metric-indicator-clickable::after {
      content: '';
      position: absolute;
      inset: -9px -8px -10px -8px;
      z-index: 1;
      border-radius: 12px;
      background: transparent;
    }
    .metric-indicator-clickable:hover,
    .metric-indicator-clickable.tooltip-active {
      z-index: 60;
    }
    .metric-indicator-clickable:hover .metric-indicator-icon-wrap,
    .metric-indicator-clickable.tooltip-active .metric-indicator-icon-wrap {
      transform: translateY(-3px);
      box-shadow: 0 4px 16px -4px var(--glow-color-high);
      border-color: rgba(255, 255, 255, 0.4);
    }
    .metric-indicator-tooltip {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out, visibility 0.12s;
      z-index: 70;
      pointer-events: none;
      white-space: normal;
    }
    .metric-indicator-clickable:hover .metric-indicator-tooltip,
    .metric-indicator-clickable.tooltip-active .metric-indicator-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .activity-overview-wrap .metric-indicator-tooltip {
      display: none !important;
    }
    .ao-drift-floating-tooltip {
      position: fixed !important;
      left: 0;
      top: 0;
      bottom: auto;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      z-index: 2147483647;
      pointer-events: none;
      white-space: normal;
      transition: opacity 0.12s ease-in-out, transform 0.12s ease-in-out, visibility 0.12s;
    }
    .ao-drift-floating-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .ao-drift-floating-tooltip.is-below .metric-indicator-tooltip-arrow {
      top: -6px;
      bottom: auto;
      transform: translateX(-50%) rotate(225deg);
    }
    .metric-indicator-tooltip-content {
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98));
      backdrop-filter: blur(12px);
      border-radius: 12px;
      padding: 10px 16px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      min-width: 230px;
      max-width: min(320px, calc(100vw - 24px));
      white-space: normal;
    }
    .metric-indicator-tooltip-arrow {
      position: absolute;
      bottom: -6px;
      left: 50%;
      width: 12px;
      height: 12px;
      background: linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.98));
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px;
    }
    .ao-drift-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      line-height: 1;
    }
    .ao-drift-icon-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      border-radius: 7px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.03);
      transition: transform 0.12s ease-in-out, box-shadow 0.12s ease-in-out, border-color 0.12s ease-in-out, background-color 0.12s ease-in-out;
      --glow-color-low: rgba(148, 163, 184, 0.18);
      --glow-color-high: rgba(148, 163, 184, 0.35);
      will-change: transform;
    }
    .metric-indicator-clickable:hover .ao-drift-icon-wrap,
    .metric-indicator-clickable.tooltip-active .ao-drift-icon-wrap {
      z-index: 65;
    }
    .ao-drift-icon-wrap .ao-drift-tag {
      border: none;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      min-width: 22px;
    }
    .ao-drift-tooltip-title {
      color: rgba(255,255,255,0.6);
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }
    .ao-drift-tooltip-pill {
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 4px 12px;
      border-radius: 9999px;
    }
    .ao-drift-tooltip-content--compact {
      align-items: center;
      gap: 6px;
      min-width: auto;
      padding: 8px 12px;
    }
    .ao-drift-tooltip-content--compact .ao-drift-tooltip-pill {
      font-size: 0.78rem;
      letter-spacing: 0;
      text-transform: none;
    }
    .metric-indicator-tooltip-content .tooltip-tier {
      font-size: 0.66rem !important;
      line-height: 1.42 !important;
    }
    .drift-key-metric-card {
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)) !important;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 0.5px solid rgba(255,255,255,0.12) !important;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
      position: relative;
      z-index: 1;
      transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .drift-key-metric-card:hover {
      z-index: 1;
      transform: none;
      box-shadow: 0 6px 24px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .ao-conf-text {
      display: inline-block;
      font-weight: 700;
      font-size: 0.78rem;
      line-height: 1;
      letter-spacing: 0.02em;
    }
    .ao-conf-text.ao-conf-high { color: #34d399; }
    .ao-conf-text.ao-conf-medium { color: #fbbf24; }
    .ao-conf-text.ao-conf-low { color: #f87171; }
    /* Loading skeleton for activity log */
    .ao-skeleton-row td { padding: 7px 8px; }
    .ao-skel { display: inline-block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%); background-size: 200% 100%; animation: ao-shimmer 1.4s infinite; }
    @keyframes ao-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .ao-row-enter {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
      will-change: opacity, transform;
    }
    .ao-row-enter.ao-row-enter-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .ao-pill-other   { background: rgba(255,255,255,.04); color: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.04); }
    /* Shoe assignment pills */
    .activity-overview-table td.ao-col-shoe {
      overflow: visible;
      position: relative;
      z-index: 62;
      isolation: isolate;
    }
    .activity-overview-table tbody tr:hover td.ao-col-shoe,
    .activity-overview-table tbody tr:focus-within td.ao-col-shoe {
      z-index: 68;
    }
    .activity-shoe-pill {
      display: inline-flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      white-space: normal;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.55);
      border: 1px solid rgba(255,255,255,0.1);
      position: relative;
      z-index: 2;
      transform-origin: left center;
      isolation: isolate;
      backface-visibility: hidden;
      transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        color 0.22s ease;
      will-change: transform;
    }
    .activity-shoe-pill::before {
      content: '';
      position: absolute;
      left: 8px;
      right: 8px;
      bottom: -13px;
      height: 16px;
      border-radius: 999px;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.28) 0%, rgba(180,180,185,0.20) 30%, rgba(120,120,130,0.10) 54%, rgba(0,0,0,0) 80%);
      opacity: 0;
      filter: blur(12px);
      transform: scaleX(0.78);
      transition:
        opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 0;
      pointer-events: none;
    }
    .activity-shoe-pill::after {
      content: '';
      position: absolute;
      inset: -10px 0 -12px 0;
      border-radius: 999px;
      background: transparent;
      z-index: 0;
    }
    .activity-shoe-pill-label {
      display: block;
      min-width: 0;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
      position: relative;
      z-index: 1;
      transition: opacity 0.24s ease, filter 0.28s ease;
    }
    .activity-shoe-pill.daily  { background: rgba(59,130,246,.12); color: #3b82f6; border-color: rgba(59,130,246,.18); }
    .activity-shoe-pill.tempo  { background: rgba(249,115,22,.12); color: #f97316; border-color: rgba(249,115,22,.18); }
    .activity-shoe-pill.race   { background: rgba(239,68,68,.12); color: #ef4444; border-color: rgba(239,68,68,.18); }
    .activity-shoe-pill.ao-shoe-tag {
      --ao-shoe-tone: 186, 197, 214;
        padding: 3px 10px;
        border-radius: 10px;
        font-size: inherit;
      font-weight: inherit;
        line-height: 1.2;
        background: linear-gradient(135deg, rgba(var(--ao-shoe-tone), 0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
        color: inherit;
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
          inset 0 0 0 1px rgba(var(--ao-shoe-tone), 0.065);
      transform: none;
      transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }
    .activity-shoe-pill.ao-shoe-tag.daily {
      --ao-shoe-tone: 96, 165, 250;
        border-color: rgba(96,165,250,0.24);
        background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag.tempo {
      --ao-shoe-tone: 251, 146, 60;
        border-color: rgba(251,146,60,0.24);
        background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag.race {
      --ao-shoe-tone: 248, 113, 113;
        border-color: rgba(248,113,113,0.24);
        background: linear-gradient(135deg, rgba(248,113,113,0.15), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      }
      .activity-shoe-pill.ao-shoe-tag.unconfirmed {
        --ao-shoe-tone: 148, 163, 184;
        border-color: rgba(148,163,184,0.24);
        background: linear-gradient(135deg, rgba(148,163,184,0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
    }
    .activity-shoe-pill.ao-shoe-tag::before {
        display: none;
    }
    .activity-shoe-pill.ao-shoe-tag::after {
      display: none;
    }
    .activity-shoe-pill.ao-shoe-tag .activity-shoe-pill-label {
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync {
      gap: 6px;
      padding: 3px 10px;
      color: rgba(255,255,255,0.92);
      background: linear-gradient(135deg, rgba(252,76,2,0.14), rgba(255,255,255,0.028) 44%, rgba(7,15,28,0.86));
      border-color: rgba(252,76,2,0.24);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 0 1px rgba(252,76,2,0.07);
      text-decoration: none;
      cursor: pointer;
    }
    .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync {
      padding-left: 10px;
    }
    .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync::before {
      display: none;
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync .activity-shoe-pill-label {
      max-width: none;
      overflow: visible;
      text-overflow: clip;
      color: inherit;
    }
    .activity-shoe-pill-strava-sync-icon {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      fill: currentColor;
      filter: drop-shadow(0 0 10px rgba(252,76,2,0.22));
    }
    .activity-shoe-pill.activity-shoe-pill-strava-sync .activity-shoe-pill-strava-sync-icon {
      color: #fc4c02;
    }
    .activity-shoe-pill.activity-shoe-pill-syncing {
      cursor: wait;
      pointer-events: none;
    }
    .activity-shoe-sync-dots {
      display: inline-flex;
      align-items: flex-end;
      justify-content: flex-start;
      width: 12px;
      margin-left: 1px;
    }
    .activity-shoe-sync-dots > span {
      opacity: 0.25;
      animation: activityShoeSyncDot 0.9s ease-in-out infinite;
    }
    .activity-shoe-sync-dots > span:nth-child(2) { animation-delay: 0.12s; }
    .activity-shoe-sync-dots > span:nth-child(3) { animation-delay: 0.24s; }
    @keyframes activityShoeSyncDot {
      0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
      30% { opacity: 1; transform: translateY(-2px); }
    }
    .activity-shoe-pill.activity-shoe-pill-synced-enter {
      animation: activityShoeSyncedEnter 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes activityShoeSyncedEnter {
      0% { opacity: 0; transform: translateY(3px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .activity-shoe-sync-dots > span,
      .activity-shoe-pill.activity-shoe-pill-synced-enter {
        animation: none !important;
      }
    }
    .activity-shoe-pill.activity-shoe-pill-confirm {
      gap: 6px;
      padding: 3px 10px;
      color: rgba(236,253,245,0.96);
      background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(255,255,255,0.032) 44%, rgba(7,15,28,0.9));
      border-color: rgba(34,197,94,0.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 0 0 1px rgba(34,197,94,0.1),
        0 0 18px rgba(34,197,94,0.08);
      text-decoration: none;
      cursor: pointer;
    }
    .activity-shoe-pill.activity-shoe-pill-confirm .activity-shoe-pill-strava-sync-icon {
      color: #22c55e;
      filter: drop-shadow(0 0 10px rgba(34,197,94,0.26));
    }
    .activity-overview-table th.ao-col-shoe {
      overflow: visible;
    }
    .ao-shoe-header-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      min-width: 0;
      white-space: nowrap;
    }
    .ao-shoe-header-help {
      flex: 0 0 auto;
      margin-left: 1px;
      vertical-align: middle;
    }
    .ao-shoe-header-help .section-tooltip-btn {
      --help-tooltip-button-size: 18px;
      --help-tooltip-icon-size: 16px;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
    }
    .ao-shoe-header-help .section-tooltip {
      left: auto;
      right: -8px;
      text-transform: none;
      white-space: normal;
    }
    .ao-shoe-header-help .section-tooltip::after {
      left: auto;
      right: 11px;
    }
    .activity-shoe-cell {
      --shoe-hover-extend: 74px;
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      width: 100%;
      position: relative;
      overflow: visible;
      isolation: isolate;
    }
    .activity-shoe-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      flex-shrink: 0;
      position: relative;
      z-index: 3;
      pointer-events: auto;
    }
    @media (hover: hover) and (pointer: fine) {
      .activity-shoe-pill:hover,
      .activity-shoe-pill:focus-visible {
        transform: translate3d(0, -5px, 0);
        color: rgba(255,255,255,0.96);
        border-color: rgba(255,255,255,0.16);
        box-shadow:
          0 14px 28px rgba(15, 23, 42, 0.26),
          0 6px 14px rgba(100, 100, 110, 0.20),
          0 0 0 1px rgba(255,255,255,0.03);
      }
      .activity-shoe-pill:hover::before,
      .activity-shoe-pill:focus-visible::before {
        opacity: 1;
        transform: scaleX(1.08);
      }
      .activity-shoe-pill:hover .activity-shoe-pill-label,
      .activity-shoe-pill:focus-visible .activity-shoe-pill-label {
        opacity: 1;
        filter: none;
      }
      .activity-shoe-pill:hover ~ .activity-shoe-actions,
      .activity-shoe-pill:focus-visible ~ .activity-shoe-actions {
        filter: blur(2px);
        opacity: 0.4;
        transition: filter 0.22s ease, opacity 0.22s ease;
      }
      .activity-shoe-pill.ao-shoe-tag:hover,
      .activity-shoe-pill.ao-shoe-tag:focus-visible {
        transform: none;
        color: inherit;
        border-color: rgba(var(--ao-shoe-tone), 0.34);
        background: linear-gradient(135deg, rgba(var(--ao-shoe-tone), 0.2), rgba(255,255,255,0.03) 44%, rgba(10,18,32,0.92));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.05),
          0 10px 20px rgba(0,0,0,0.16);
      }
      .activity-shoe-pill.ao-shoe-tag:hover::before,
      .activity-shoe-pill.ao-shoe-tag:focus-visible::before {
        display: none;
      }
      .activity-shoe-pill.ao-shoe-tag:hover ~ .activity-shoe-actions,
      .activity-shoe-pill.ao-shoe-tag:focus-visible ~ .activity-shoe-actions {
        filter: none;
        opacity: 1;
      }
      .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync:hover,
      .activity-shoe-pill.ao-shoe-tag.activity-shoe-pill-strava-sync:focus-visible {
        transform: none;
        color: rgba(255,255,255,0.96);
        border-color: rgba(252,76,2,0.34);
        background: linear-gradient(135deg, rgba(252,76,2,0.2), rgba(255,255,255,0.03) 44%, rgba(10,18,32,0.92));
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.05),
          0 10px 20px rgba(0,0,0,0.16);
      }
    }
    .activity-shoe-icon-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 1px solid rgba(46, 209, 244, 0.22);
      background: rgba(46, 209, 244, 0.06);
      color: rgba(46, 209, 244, 0.65);
      cursor: pointer;
      transition: all 0.18s ease;
      padding: 0;
      position: relative;
      z-index: 4;
      pointer-events: auto;
      touch-action: manipulation;
    }
    .activity-shoe-icon-btn:hover:not(:disabled) {
      border-color: rgba(46, 209, 244, 0.45);
      background: rgba(46, 209, 244, 0.14);
      box-shadow: 0 2px 10px rgba(46, 209, 244, 0.12);
      color: rgba(46, 209, 244, 0.9);
      transform: translateY(-1px);
    }
    .activity-shoe-icon-btn.delete {
      border-color: rgba(239, 68, 68, 0.3);
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.04));
      color: #f87171;
    }
    .activity-shoe-icon-btn.delete:hover:not(:disabled) {
      border-color: rgba(239, 68, 68, 0.55);
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(239, 68, 68, 0.08));
      box-shadow: 0 2px 10px rgba(239, 68, 68, 0.18);
      color: #fca5a5;
    }
    .activity-shoe-icon-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }
    .activity-shoe-icon-btn.delete:disabled {
      opacity: 1;
      border-color: rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.22);
      cursor: not-allowed;
      pointer-events: none;
    }
    @keyframes asme-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes asme-modal-in { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes asme-spin { to { transform: rotate(360deg); } }
    @keyframes asme-success-pop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
    .activity-shoe-editor-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(1, 4, 18, 0.8);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      z-index: 2147483647;
    }
    .activity-shoe-editor-backdrop.active {
      display: flex;
      animation: asme-backdrop-in 0.22s ease;
    }
    .activity-shoe-editor-modal {
      position: relative;
      width: min(100%, 480px);
      border-radius: 22px;
      border: 1px solid rgba(46,209,244,0.15);
      background: linear-gradient(160deg, rgba(10, 18, 40, 0.98) 0%, rgba(15, 25, 55, 0.97) 100%);
      box-shadow: 0 24px 72px rgba(0,0,0,0.55), 0 0 48px rgba(46,209,244,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 28px;
      animation: asme-modal-in 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .activity-shoe-editor-loading-overlay {
      display: none;
      position: absolute;
      inset: 0;
      border-radius: 22px;
      background: rgba(10,18,40,0.82);
      backdrop-filter: blur(4px);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 12px;
      z-index: 10;
    }
    .activity-shoe-editor-loading-overlay.visible {
      display: flex;
    }
    .asme-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2.5px solid rgba(46,209,244,0.18);
      border-top-color: #2ed1f4;
      animation: asme-spin 0.75s linear infinite;
    }
    .asme-spinner-sm {
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
      border-top-color: white;
      animation: asme-spin 0.65s linear infinite;
      vertical-align: middle;
      margin-right: 6px;
    }
    .asme-spinner-sm--danger {
      border-color: rgba(254, 202, 202, 0.2);
      border-top-color: #f87171;
    }
    .asme-loading-text {
      font-size: 0.78rem;
      color: rgba(46,209,244,0.65);
      letter-spacing: 0.04em;
    }
    .activity-shoe-editor-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }
    .activity-shoe-editor-close {
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.6);
      width: 34px;
      height: 34px;
      border-radius: 999px;
      font-size: 18px !important;
      line-height: 1;
      flex-shrink: 0;
      transition: all 0.18s ease;
      cursor: pointer;
    }
    .activity-shoe-editor-close:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
      color: white;
    }
    .activity-shoe-editor-meta {
      color: rgba(255,255,255,0.5);
      font-size: 0.8rem;
      margin-top: 4px;
      letter-spacing: 0.01em;
    }
    .activity-shoe-editor-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .activity-shoe-editor-label {
      display: block;
      color: rgba(255,255,255,0.5);
      font-size: 0.7rem !important;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .activity-shoe-editor-select {
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: white;
      padding: 12px 14px;
      font-size: 0.9rem !important;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      cursor: pointer;
    }
    .activity-shoe-editor-select:focus {
      outline: none;
      border-color: rgba(46,209,244,0.55);
      box-shadow: 0 0 0 3px rgba(46,209,244,0.1);
    }
    .activity-shoe-editor-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .activity-shoe-editor-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex: 1;
      min-width: 120px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 11px;
      padding: 11px 28px;
      font-size: 0.82rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .activity-shoe-editor-btn.primary {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.88);
      font-weight: 400;
      box-shadow: none;
    }
    .activity-shoe-editor-btn.primary:hover:not(:disabled) {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.3);
      box-shadow: none;
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.ghost {
      background: transparent;
      border-color: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.55);
    }
    .activity-shoe-editor-btn.ghost:hover:not(:disabled) {
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.8);
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.ghost.destructive {
      background: rgba(248,113,113,0.03);
      border-color: rgba(248,113,113,0.18);
      color: rgba(254, 202, 202, 0.82);
    }
    .activity-shoe-editor-btn.ghost.destructive:hover:not(:disabled) {
      background: rgba(248,113,113,0.08);
      border-color: rgba(248,113,113,0.32);
      color: #fecaca;
      box-shadow: 0 8px 24px rgba(127, 29, 29, 0.14);
      transform: translateY(-1px);
    }
    .activity-shoe-editor-btn.is-busy-remove {
      background: linear-gradient(180deg, rgba(248,113,113,0.18), rgba(127,29,29,0.16));
      border-color: rgba(248,113,113,0.44);
      color: #fee2e2;
      box-shadow: 0 0 0 1px rgba(248,113,113,0.08) inset, 0 10px 28px rgba(127,29,29,0.18);
    }
    .activity-shoe-editor-btn.is-busy-remove:disabled {
      opacity: 0.88;
    }
    .activity-shoe-editor-btn:disabled {
      opacity: 0.45;
      cursor: default;
      transform: none !important;
    }
    .activity-shoe-editor-hint {
      color: rgba(255,255,255,0.38);
      font-size: 0.76rem;
      margin-top: 14px;
      line-height: 1.5;
    }
    .activity-shoe-editor-hint a {
      color: rgba(46,209,244,0.7);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .activity-shoe-editor-hint a:hover {
      color: #2ed1f4;
    }
    .activity-shoe-editor-message {
      display: none;
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 11px;
      font-size: 0.82rem;
      line-height: 1.45;
    }
    .activity-shoe-editor-message.show {
      display: block;
      animation: asme-success-pop 0.3s ease;
    }
    .activity-shoe-editor-message.error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.2);
      color: #fca5a5;
    }
    .activity-shoe-editor-message.success {
      background: rgba(46,209,244,0.07);
      border: 1px solid rgba(46,209,244,0.22);
      color: #67e8f9;
    }
    .ao-new-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 13px;
      height: 13px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      padding: 0 3px;
      border-radius: 999px;
      background: rgba(34, 197, 94, 0.15);
      color: #34d399;
      border: 1px solid rgba(34, 197, 94, 0.2);
      vertical-align: middle;
      flex-shrink: 0;
      overflow: visible;
    }
    .ao-reason {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
      font-style: italic;
      white-space: normal;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ao-device-cell {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      max-width: none;
    }
    .ao-device-manual {
      color: rgba(255,255,255,0.5);
      font-style: italic;
    }
    .ao-device-cell .garmin-tag-logo { height: 12px; }
    @media (max-width: 639px) {
      .activity-overview-wrap {
        max-height: 280px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-x pan-y;
      }
      .activity-overview-table th,
      .activity-overview-table td { padding: 5px 6px; font-size: 10px; }
      .ao-pill { font-size: 9px; padding: 1px 5px; }
      .ao-reason { font-size: 9px; }
      .ao-new-badge { min-width: 12px; height: 12px; font-size: 8px; padding: 0 2px; }
      .ao-col-dist, .ao-col-pace, .ao-col-device { display: none; }
      /* Collapse hidden col elements so remaining columns get full width */
      col.ao-col-dist, col.ao-col-pace, col.ao-col-device { visibility: collapse; width: 0 !important; }
    }
    @media (max-width: 430px) {
      .activity-overview-table th,
      .activity-overview-table td { padding: 4px 5px; font-size: 9px; }
      .ao-pill { font-size: 8px; padding: 1px 4px; }
      .ao-reason { font-size: 8px; }
    }

    /* -- Rep Runs placeholder -- */
    .rep-runs-placeholder {
      text-align: center;
      padding: 14px 0;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .rep-runs-placeholder-title {
      color: rgba(255,255,255,0.82);
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 7px;
      letter-spacing: 0.01em;
    }
    .rep-runs-placeholder-text {
      color: rgba(255,255,255,0.56);
      font-size: 12px;
      line-height: 1.5;
      max-width: 540px;
      margin: 0 auto;
    }
    .rep-runs-skeleton-grid {
      display: flex;
      gap: 12px;
    }
    .rep-runs-skeleton-card {
      position: relative;
      overflow: hidden;
      padding: 1.25rem;
      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);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
      flex: 1;
      min-width: 0;
    }
    .rep-runs-skeleton-card > * { position: relative; z-index: 1; }
    .rep-runs-skeleton-card[data-type="daily"] { border-color: rgba(59, 130, 246, 0.35) !important; }
    .rep-runs-skeleton-card[data-type="tempo"] { border-color: rgba(249, 115, 22, 0.35) !important; }
    .rep-runs-skeleton-card[data-type="race"]  { border-color: rgba(239, 68, 68, 0.35) !important; }
    .rep-runs-skeleton-label {
      font-size: 1.05rem;
      font-weight: 700;
      color: white;
      margin-bottom: 4px;
      letter-spacing: -0.01em;
    }
    .rep-runs-skeleton-price {
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .rep-runs-skeleton-card[data-type="daily"] .rep-runs-skeleton-price { color: #3b82f6; }
    .rep-runs-skeleton-card[data-type="tempo"] .rep-runs-skeleton-price { color: #f97316; }
    .rep-runs-skeleton-card[data-type="race"]  .rep-runs-skeleton-price { color: #ef4444; }
    .rep-runs-skeleton-bar {
      height: 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.07);
      animation: repRunsShimmer 1.6s ease-in-out infinite;
    }
    .rep-runs-skeleton-bar.narrow { width: 55%; }
    .rep-runs-skeleton-lines {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .rep-runs-skeleton-lines-top { margin-top: 2px; }
    .rep-runs-skeleton-lines-bottom { margin-top: 14px; }
    .rep-runs-skeleton-divider {
      width: 100%;
      height: 1px;
      background: rgba(255,255,255,0.08);
      margin: 14px 0 0;
    }
    @keyframes repRunsShimmer {
      0%, 100% { opacity: 0.5; }
      50% { opacity: 1; }
    }
    @media (max-width: 640px) {
      .rep-runs-skeleton-grid { flex-direction: column; }
    }

    /* -- Bucket Stats Cards -- */
    .bucket-card {
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 1.25rem;
      border-radius: 0.5rem; /* Matches .tier-showcase-card border-radius */
      /* Base styles from .tier-showcase-card */
      background: #001018; /* var(--color-dark, #001018) */
      /* Removed glass/backdrop filter to make it solid and consistent */
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);

      cursor: pointer;
      transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  background 0.4s ease;
      flex: 1;
      min-width: 0;
      opacity: 0;
      transform: translateY(16px);
    }
    .bucket-card.bucket-visible { opacity: 1; transform: translateY(0); transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }

    /* The Blur/Glow Container - Replicating .metric-card-blur */
    .bucket-card .bucket-blur-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    /* The Glow Image inside */
    .bucket-card .bucket-blur-container img {
      width: 100%;
      max-width: none;
      height: 180%;
      object-fit: cover;
      object-position: center bottom;
      pointer-events: none;
      display: block;
      /* Reverting to match .tier-showcase-card exactly */
      opacity: 0.25;
      filter: blur(32px) saturate(1.45) brightness(1.07);
      transform: translateY(22%) scale(1.22);
      mix-blend-mode: screen;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Daily (Blue) */
    .bucket-card[data-shoe-type="daily"] .bucket-blur-container img {
      /* Dark Blue: hue-rotate to blue, significantly lower brightness to combat screen blend mode lightness */
      filter: blur(32px) saturate(1.6) brightness(0.65) hue-rotate(55deg);
    }
    .bucket-card[data-shoe-type="daily"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="daily"].selected .bucket-blur-container img {
      opacity: 0.95; /* Intense glow on select/hover */
    }

    /* Tempo (Orange) */
    .bucket-card[data-shoe-type="tempo"] .bucket-blur-container img {
      /* Ensure vibrant orange */
      filter: blur(32px) saturate(1.8) brightness(1.1);
    }
    .bucket-card[data-shoe-type="tempo"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="tempo"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Race (Red) */
    .bucket-card[data-shoe-type="race"] .bucket-blur-container img {
      filter: blur(32px) saturate(1.45) brightness(1.07);
    }
    .bucket-card[data-shoe-type="race"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="race"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Content z-index fix */
    .bucket-card > * { position: relative; z-index: 1; }
    /* But background blur is z-index 0, so content needs explicit z-index 1, and blur needed inside. */

    /* Daily (Blue/Cyan) -> Blue */
    .bucket-card[data-shoe-type="daily"] { border-color: rgba(59, 130, 246, 0.4); }
    .bucket-card[data-shoe-type="daily"]:hover,
    .bucket-card[data-shoe-type="daily"].selected {
      border-color: rgba(59, 130, 246, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Tempo (Orange) */
    .bucket-card[data-shoe-type="tempo"] { border-color: rgba(249, 115, 22, 0.4); }
    .bucket-card[data-shoe-type="tempo"]:hover,
    .bucket-card[data-shoe-type="tempo"].selected {
      border-color: rgba(249, 115, 22, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Race (Red) */
    .bucket-card[data-shoe-type="race"] { border-color: rgba(239, 68, 68, 0.4); }
    .bucket-card[data-shoe-type="race"]:hover,
    .bucket-card[data-shoe-type="race"].selected {
      border-color: rgba(239, 68, 68, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    /* Long Run (Emerald) */
    .bucket-card[data-shoe-type="long_run"] { border-color: rgba(16, 185, 129, 0.4); }
    .bucket-card[data-shoe-type="long_run"]:hover,
    .bucket-card[data-shoe-type="long_run"].selected {
      border-color: rgba(16, 185, 129, 0.8);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }
    .bucket-card[data-shoe-type="long_run"] .bucket-blur-container img {
      filter: blur(32px) saturate(1.6) brightness(0.85) hue-rotate(120deg);
    }
    .bucket-card[data-shoe-type="long_run"]:hover .bucket-blur-container img,
    .bucket-card[data-shoe-type="long_run"].selected .bucket-blur-container img {
      opacity: 0.95;
    }

    /* Child elements */
    .bucket-card .bucket-label { font-size: 1.05rem; font-weight: 700; color: white; margin-bottom: 4px; letter-spacing: -0.01em; }
    .bucket-card .bucket-price { font-size: 0.85rem; font-weight: 700; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.05em; }
    .bucket-card[data-shoe-type="daily"] .bucket-price { color: #3b82f6; }
    .bucket-card[data-shoe-type="tempo"] .bucket-price { color: #f97316; }
    .bucket-card[data-shoe-type="race"] .bucket-price { color: #ef4444; }
    .bucket-card[data-shoe-type="long_run"] .bucket-price { color: #10b981; }
    .bucket-card .bucket-stat { display: flex; justify-content: space-between; font-size: 0.8rem; color: rgba(255,255,255,0.6); padding: 4px 0; }
    .bucket-card .bucket-stat .stat-val { color: white; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
    .bucket-card .stat-delta { font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 6px; line-height: 1.3; }
    .bucket-card .stat-delta.delta-positive { color: #34d399; background: rgba(16, 185, 129, 0.12); }
    .bucket-card .stat-delta.delta-negative { color: #f87171; background: rgba(248, 113, 113, 0.12); }
    .bucket-card .stat-delta.delta-neutral { color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
    .bucket-card .bucket-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); margin: 12px 0; }
    .bucket-card .bucket-rep-run { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 12px; background: #001018; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); box-shadow: none; }
    .bucket-rep-run .rep-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-height: 16px; line-height: 1.2; overflow: hidden; }
    .bucket-rep-run .rep-row .rep-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bucket-rep-run .rep-row-device .rep-device { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bucket-rep-run .rep-dot { color: rgba(255,255,255,0.2); font-size: 9px; }
    .bucket-rep-run .rep-device { color: rgba(255,255,255,0.45); }
    .garmin-tag-logo { height: 14px; width: auto; display: inline-block; vertical-align: middle; margin-right: 3px; margin-top: -1px; }
    .rep-device .garmin-tag-logo { height: 13px; }
    /* Rep-label matches type color */
    .bucket-card[data-shoe-type="daily"] .bucket-rep-run .rep-label { color: rgba(59, 130, 246, 0.8); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; }
    .bucket-card[data-shoe-type="tempo"] .bucket-rep-run .rep-label { color: rgba(249, 115, 22, 0.8); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; }
    .bucket-card[data-shoe-type="race"] .bucket-rep-run .rep-label { color: rgba(239, 68, 68, 0.8); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; }
    .bucket-card[data-shoe-type="long_run"] .bucket-rep-run .rep-label { color: rgba(16, 185, 129, 0.8); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.65rem; }
    .bucket-card .bucket-no-data { text-align: center; padding: 12px 0; color: rgba(255,255,255,0.35); font-size: 0.8rem; }
    /* Route map - fades seamlessly into card background */
    .bucket-route-map {
      width: calc(100% + 2.5rem); height: 200px; border-radius: 0; margin-top: 12px;
      margin-left: -1.25rem;
      margin-right: -1.25rem;
      margin-bottom: -1.25rem;
      overflow: hidden; position: relative; z-index: 1;
      background: transparent;
      /* Keep only a top fade; no oval clipping */
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 18%, black 34%, black 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 18%, black 34%, black 100%);
      opacity: 0;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                  transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bucket-route-map.map-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .bucket-route-map .leaflet-container { background: transparent !important; }
    .bucket-route-map .leaflet-tile-pane { opacity: 0.55; mix-blend-mode: screen; transition: opacity 0.45s ease; }

    /* Ensure content is above map */
    .bucket-card .bucket-label,
    .bucket-card .bucket-price,
    .bucket-card .bucket-stat,
    .bucket-card .bucket-divider,
    .bucket-card .bucket-rep-run {
      position: relative;
      z-index: 2;
    }

    /* Adjust rep run container */
    .bucket-card .bucket-rep-run {
      background: #001018;
      /* No massive margin bottom needed */
    }
    .bucket-card .bucket-checkmark {
      position: absolute; top: 12px; right: 12px;
      width: 24px; height: 24px; border-radius: 50%;
      display: none; align-items: center; justify-content: center;
      font-size: 14px; color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .bucket-card.selected .bucket-checkmark { display: flex; }
    .bucket-card[data-shoe-type="daily"].selected .bucket-checkmark { background: rgba(59, 130, 246, 0.8); border-color: rgba(59, 130, 246, 1); }
    .bucket-card[data-shoe-type="tempo"].selected .bucket-checkmark { background: rgba(249, 115, 22, 0.8); border-color: rgba(249, 115, 22, 1); }
    .bucket-card[data-shoe-type="race"].selected .bucket-checkmark { background: rgba(239, 68, 68, 0.8); border-color: rgba(239, 68, 68, 1); }
    .bucket-card[data-shoe-type="long_run"].selected .bucket-checkmark { background: rgba(16, 185, 129, 0.8); border-color: rgba(16, 185, 129, 1); }

    /* -- Form Drift Profile Section -- */
    .drift-profile-section {
      margin-top: 2rem;
      opacity: 0;
      transform: translateY(16px);
      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);
    }
    .drift-profile-section.drift-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .drift-section-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1rem;
    }
    .drift-section-header h4 {
      color: white;
      font-size: 1rem;
      font-weight: 600;
      margin: 0;
    }
    .drift-section-header .drift-badge {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(34, 211, 238, 0.12);
      color: #22d3ee;
    }
    .drift-chart-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    @media (max-width: 768px) {
      .drift-chart-row { grid-template-columns: 1fr; }
    }
    .drift-chart-card {
      background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(34, 211, 238, 0.14);
      border-radius: 14px;
      padding: 18px;
      position: relative;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    #biomechanicalProfileSection .drift-chart-card {
      background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(148, 163, 184, 0.14);
    }
    #biomechanicalProfileSection .drift-chart-card.biomech-signature-card {
      background: none;
      border: none;
      box-shadow: none;
      padding-left: 0;
      padding-right: 0;
    }
    .drift-chart-card h5 {
      color: #ffffff !important;
      font-size: 1rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      margin: 0 0 12px 0;
    }
    .drift-chart-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 0 12px 0;
      flex-wrap: wrap;
    }
    .frp-controls-grid {
      display: grid;
      grid-template-columns: max-content max-content minmax(118px, 1fr);
      gap: 0;
      align-items: flex-start;
      margin-bottom: 14px;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 12px 18px;
    }
    .frp-control-group {
      min-width: 0;
      padding-right: 18px;
      margin-right: 18px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .frp-control-group--runs {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-self: start;
      text-align: left;
      padding-left: 18px;
      padding-right: 0;
      margin-right: 0;
      border-right: none;
      min-width: 0;
      max-width: 100%;
    }
    .frp-runs-summary {
      min-width: 0;
      max-width: 100%;
    }
    .frp-runs-summary .bio-cg-runs-sampled {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.25;
    }
    .frp-control-label {
      font-size: 0.55rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.25);
      margin-bottom: 8px;
    }
    .frp-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }
    .frp-bottom-grid {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .frp-secondary-card {
      flex: 1 1 320px;
      min-width: 280px;
      padding: 20px;
    }
    .frp-secondary-card--impact {
      flex-basis: 280px;
      min-width: 260px;
    }
    .frp-impact-content {
      display: flex;
      flex: 1;
    }
    #lpiImpactContent { display: flex; flex: 1; min-width: 0; }
    .frp-impact-metric {
      --frp-impact-accent: rgba(255,255,255,0.72);
      position: relative;
      overflow: hidden;
      flex: 1;
      min-width: 0;
      min-height: 160px;
      padding: 20px 16px;
      border-radius: 14px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 16px;
      background: transparent;
      border: 1px solid transparent;
      isolation: isolate;
      box-shadow: 0 12px 24px rgba(0,0,0,0.16);
    }
    .frp-impact-metric::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, var(--frp-impact-accent) 28%, rgba(255,255,255,0.04) 58%, var(--frp-impact-accent) 82%, rgba(255,255,255,0.08) 100%);
      background-size: 180% 180%;
      opacity: 0.74;
      pointer-events: none;
    }
    .frp-impact-metric::after {
      content: '';
      position: absolute;
      inset: 1px;
      border-radius: calc(14px - 1px);
      background: linear-gradient(180deg, rgba(8,14,25,0.96), rgba(5,10,18,0.9));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      pointer-events: none;
    }
    .frp-impact-metric > * {
      position: relative;
      z-index: 1;
    }
    .frp-impact-values {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      row-gap: 6px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .frp-impact-number {
      display: inline-flex;
      align-items: center;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .frp-impact-number--baseline {
      font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.65rem);
      font-weight: 600;
      color: rgba(255,255,255,0.56);
    }
    .frp-impact-number--projected {
      font-size: clamp(1.8rem, 1.4rem + 1vw, 2.3rem);
      font-weight: 700;
      color: var(--frp-impact-accent);
    }
    .frp-impact-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      color: rgba(255,255,255,0.28);
      transform: translateY(1px);
    }
    .frp-impact-summary {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0;
      width: 100%;
      text-align: center;
    }
    .frp-impact-shift-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--frp-impact-accent);
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0.01em;
      font-variant-numeric: tabular-nums;
    }
    .frp-impact-label {
      font-size: 0.94rem;
      font-weight: 600;
      color: rgba(255,255,255,0.58);
      line-height: 1.4;
      letter-spacing: 0.01em;
      max-width: none;
      text-align: center;
    }
    .frp-spinner {
      width: 22px; height: 22px;
      border: 2px solid rgba(255,255,255,0.1);
      border-top-color: rgba(255,255,255,0.5);
      border-radius: 50%;
      animation: frpSpin 0.6s linear infinite;
    }
    @keyframes frpSpin { to { transform: rotate(360deg); } }
    .frp-value-fade-change {
      animation: frpValueFadeChange 260ms ease;
    }
    @keyframes frpValueFadeChange {
      0% { opacity: 1; }
      50% { opacity: 0.32; }
      100% { opacity: 1; }
    }
    @media (max-width: 640px) {
      .frp-impact-metric {
        min-height: 140px;
        gap: 12px;
        padding: 18px 10px;
      }

      .frp-impact-values {
        min-width: 100%;
        justify-content: center;
        gap: 7px;
      }

      .frp-impact-number--baseline {
        font-size: clamp(1.1rem, 5vw, 1.45rem);
      }

      .frp-impact-number--projected {
        font-size: clamp(1.5rem, 6.5vw, 1.95rem);
      }

      .frp-impact-shift-value {
        min-height: 27px;
        padding: 0 9px;
        font-size: 0.78rem;
      }

      .frp-impact-summary {
        width: 100%;
        align-items: center;
        text-align: center;
        gap: 5px;
      }

      .frp-impact-label {
        max-width: none;
      }
    }
    @media (min-width: 768px) and (max-width: 1194px) {
      #activityOverviewContainer .activity-overview-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      #activityOverviewContainer .activity-overview-table {
        table-layout: auto;
        min-width: clamp(680px, 84vw, 760px);
      }

      #envelopeControlsGrid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 14px;
        padding: 14px 16px;
      }

      #envelopeControlsGrid .frp-control-group {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }

      #envelopeRunsControls {
        grid-column: 1 / -1;
        justify-self: stretch;
        align-items: stretch;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.07);
      }

      #envelopeMetricTabs,
      #envelopeAxisTabs,
      #envelopeFilterBar {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        overflow: visible;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (min-width: 641px) and (max-width: 1180px) {
      #activityOverviewContainer .activity-overview-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
      }

      #activityOverviewContainer .activity-overview-table {
        table-layout: auto;
        min-width: 1080px;
      }

      #activityOverviewContainer .activity-overview-table col:first-child {
        width: 112px !important;
      }

      #activityOverviewContainer col.ao-col-dist {
        width: 82px !important;
      }

      #activityOverviewContainer col.ao-col-pace {
        width: 76px !important;
      }

      #activityOverviewContainer col.ao-col-device {
        width: 124px !important;
      }

      #activityOverviewContainer col.ao-col-drift {
        width: 132px !important;
      }

      #activityOverviewContainer col.ao-col-category {
        width: 132px !important;
      }

      #activityOverviewContainer col.ao-col-shoe {
        width: 358px !important;
      }

      #activityOverviewContainer col.ao-col-toggle {
        width: 64px !important;
      }

      #activityOverviewContainer .activity-overview-table th.ao-col-device,
      #activityOverviewContainer .activity-overview-table td.ao-col-device {
        min-width: 124px;
      }

      #activityOverviewContainer .activity-overview-table th.ao-col-drift,
      #activityOverviewContainer .activity-overview-table td.ao-col-drift {
        min-width: 132px;
        width: 132px;
        padding-left: 10px !important;
        padding-right: 10px !important;
      }

      #activityOverviewContainer .ao-drift-cell {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
        min-width: max-content;
      }

      #activityOverviewContainer .ao-drift-cell .ao-drift-indicator,
      #activityOverviewContainer .ao-drift-cell .ao-drift-tag--conf {
        flex: 0 0 auto;
      }

      #activityOverviewContainer .ao-drift-tag.ao-drift-tag--icon,
      #activityOverviewContainer .ao-drift-tag.ao-drift-tag--conf,
      #activityOverviewContainer .ao-drift-icon-wrap .ao-drift-tag {
        min-width: 24px;
        padding: 3px 5px;
      }

      #activityOverviewContainer .activity-overview-wrap .metric-indicator-clickable::after {
        inset: -6px -5px;
      }
    }
    @media (min-width: 641px) and (max-width: 980px) {
      #fatigueResilienceSection .frp-cg-wrap {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px 14px;
        padding: 14px 16px;
      }
      #fatigueResilienceSection .frp-cg-wrap .bio-cg-col {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
      #fatigueResilienceSection .frp-cg-wrap .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
    }
    .frp-explain-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 2px 0;
      color: rgba(255,255,255,0.38);
      font-size: 0.62rem;
      transition: color 0.2s ease;
    }
    .frp-explain-toggle:hover,
    .frp-explain-toggle:focus-visible {
      color: rgba(255,255,255,0.6);
      outline: none;
    }
    .frp-explain-toggle-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border-radius: 999px;
      border: 1px solid rgba(34, 211, 238, 0.22);
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.14) 0%, rgba(9, 16, 31, 0.92) 100%);
      box-shadow: 0 4px 10px rgba(3, 10, 24, 0.25);
      color: rgba(186, 245, 255, 0.92);
      flex-shrink: 0;
    }
    .frp-explain-toggle-icon svg {
      width: 0.7rem !important;
      height: 0.7rem !important;
      color: currentColor;
      filter: none;
    }
    .frp-explain-toggle-chevron {
      flex-shrink: 0;
    }
    .drift-chart-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .drift-chart-toolbar > div:first-child {
      min-width: 0;
      max-width: 100%;
    }
    .drift-chart-toolbar h5 {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    .drift-chart-hint {
      font-size: 0.74rem;
      color: rgba(255,255,255,0.45);
    }
    .drift-timeline-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .drift-timeline-head {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 100%;
    }
    .drift-timeline-head .drift-chart-hint {
      margin-top: 0 !important;
      line-height: 1.45;
      max-width: 95%;
    }
    .drift-timeline-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .drift-effort-toggle {
      display: inline-flex;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      font-size: 10px;
      flex-shrink: 0;
    }
    .drift-effort-toggle .load-type-btn {
      padding: 3px 10px;
      background: transparent;
      color: rgba(255,255,255,0.4);
      border: none;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .drift-effort-toggle .load-type-btn + .load-type-btn {
      border-left: 1px solid rgba(255,255,255,0.1);
    }
    .drift-timeline-toolbar .drift-filter-bar {
      margin-left: 0;
      flex-wrap: wrap;
    }
    .drift-timeline-card .drift-response-strip {
      margin-top: 0;
    }
    .drift-timeline-card .drift-chart-container {
      margin-top: 2px;
    }
    @media (max-width: 980px) {
      .drift-timeline-head .drift-chart-hint {
        max-width: 100%;
      }
      .drift-timeline-toolbar {
        align-items: flex-start;
      }
    }
    .drift-response-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .drift-response-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.68rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.74);
    }
    .drift-response-pill strong {
      color: #ffffff;
      font-weight: 700;
    }
    .drift-response-pill.response-up {
      color: #fbbf24;
      border-color: rgba(251,191,36,0.22);
      background: rgba(251,191,36,0.10);
    }
    .drift-response-pill.response-flat {
      color: #34d399;
      border-color: rgba(52,211,153,0.22);
      background: rgba(52,211,153,0.10);
    }
    .drift-response-pill.response-down {
      color: #fb7185;
      border-color: rgba(251,113,133,0.22);
      background: rgba(251,113,133,0.10);
    }
    .drift-chart-reset,
    .drift-window-reset-btn,
    .drift-window-save-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid transparent;
      font-size: 10.5px;
      font-weight: 400;
      letter-spacing: normal;
      line-height: 1.15;
      font-family: inherit;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      background: transparent;
      color: rgba(255,255,255,0.92);
    }
    .drift-chart-reset {
      --btn-color-rgb: 46, 209, 244;
    }
    .drift-chart-reset:hover {
      background: rgba(46, 209, 244,0.07) !important;
      color: rgba(255,255,255,0.9) !important;
      box-shadow: inset 0px -5px 12px rgba(46, 209, 244,0.22),
                  inset 0px 5px 12px rgba(46, 209, 244,0.12);
    }
    .drift-chart-reset:hover::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(46, 209, 244,0.4) 0%,
        rgba(46, 209, 244,0.18) 100%
      );
    }
    /* Faint default gradient border for all toolbar buttons */
    .drift-chart-reset::before,
    .drift-window-reset-btn::before,
    .drift-window-save-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(var(--btn-color-rgb, 46, 209, 244), 0.30) 0%,
        rgba(var(--btn-color-rgb, 46, 209, 244), 0.14) 100%
      );
    }
    /* Active (click): colored text + stronger border */
    .drift-chart-reset:active,
    .drift-window-reset-btn:active { color: #22d3ee !important; }
    .drift-window-save-btn:active:not(:disabled) { color: #34d399 !important; }
    .drift-chart-reset:active::before,
    .drift-window-reset-btn:active::before {
      background: linear-gradient(90deg, rgba(46, 209, 244,0.55) 0%, rgba(46, 209, 244,0.3) 100%);
    }
    .drift-window-save-btn:active:not(:disabled)::before {
      background: linear-gradient(90deg, rgba(52,211,153,0.55) 0%, rgba(52,211,153,0.3) 100%);
    }
    /* -- Drift window adjustment controls -- */
    .drift-window-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin: 0;
      flex-wrap: wrap;
    }
    .dw-nudge-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .dw-nudge-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding-right: 2px;
      line-height: 1.15;
    }
    .dw-view-wrap {
      display: none;
      align-items: center;
      gap: 4px;
    }
    .dw-view-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding-right: 2px;
      line-height: 1.15;
      white-space: nowrap;
    }
    .dw-nudge-btn {
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(255,255,255,0.92);
      font-size: 10.5px;
      line-height: 1.15;
      font-weight: 400;
      font-family: inherit;
      letter-spacing: normal;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      --btn-color-rgb: 46, 209, 244;
    }
    .dw-view-btn {
      width: 30px;
      min-width: 30px;
      height: 28px;
      padding: 0;
    }
    .dw-nudge-btn::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(46, 209, 244,0.30) 0%, rgba(46, 209, 244,0.14) 100%);
    }
    .dw-nudge-btn:hover:not(:disabled) {
      background: rgba(46, 209, 244,0.07) !important;
      color: rgba(255,255,255,0.9) !important;
      box-shadow: inset 0px -5px 12px rgba(46, 209, 244,0.22),
                  inset 0px 5px 12px rgba(46, 209, 244,0.12);
    }
    .dw-nudge-btn:hover:not(:disabled)::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(46, 209, 244,0.4) 0%,
        rgba(46, 209, 244,0.18) 100%
      );
    }
    .dw-nudge-btn:active:not(:disabled) { color: #67e8f9 !important; }
    .dw-nudge-btn:active:not(:disabled)::before {
      background: linear-gradient(90deg, rgba(46, 209, 244,0.55) 0%, rgba(46, 209, 244,0.3) 100%);
    }
    .dw-nudge-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .drift-window-reset-btn {
      --btn-color-rgb: 46, 209, 244;
    }
    .drift-window-reset-btn:hover {
      background: rgba(46, 209, 244,0.07) !important;
      color: rgba(255,255,255,0.9) !important;
      box-shadow: inset 0px -5px 12px rgba(46, 209, 244,0.22),
                  inset 0px 5px 12px rgba(46, 209, 244,0.12);
    }
    .drift-window-reset-btn:hover::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(46, 209, 244,0.4) 0%,
        rgba(46, 209, 244,0.18) 100%
      );
    }
    .drift-window-reset-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }
    /* -- Reset-windows dropdown -- */
    .dw-reset-wrap {
      position: relative;
      display: inline-block;
    }
    .dw-reset-trigger {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .dw-reset-caret {
      font-size: 0.55rem;
      opacity: 0.7;
      pointer-events: none;
    }
    .dw-reset-menu {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      background: linear-gradient(180deg, rgba(17, 32, 48, 0.98), rgba(12, 22, 36, 0.98));
      border: 1px solid rgba(46,209,244,0.24);
      border-radius: 8px;
      padding: 4px;
      min-width: 150px;
      z-index: 9999;
      box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 0 1px rgba(46,209,244,0.08);
    }
    .dw-reset-item {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      color: rgba(255,255,255,0.9);
      font-size: 8.25px;
      font-weight: 400;
      padding: 6px 10px;
      border-radius: 5px;
      cursor: pointer;
      letter-spacing: normal;
      transition: background 0.14s ease;
    }
    .dw-reset-item:hover {
      background: rgba(46,209,244,0.14);
      color: rgba(255,255,255,0.96);
    }
    .dw-reset-item--saved:disabled,
    .dw-reset-item--saved[disabled] {
      color: rgba(255,255,255,0.35);
      cursor: default;
      pointer-events: none;
    }
    .drift-window-save-btn {
      -webkit-appearance: none;
      appearance: none;
      --btn-color-rgb: 52,211,153;
      --dw-save-status-size: 12px;
      --dw-save-status-offset: 8px;
      --dw-save-status-balance: 0px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 4px 10px;
      box-sizing: border-box;
    }
    @media (min-width: 641px) {
      .drift-window-save-btn {
        min-width: 110px;
        min-height: 28px;
        padding: 6px 14px;
      }
    }
    .drift-window-save-btn:hover:not(:disabled) {
      background: rgba(52,211,153,0.07) !important;
      color: rgba(255,255,255,0.9) !important;
      box-shadow: inset 0px -5px 12px rgba(52,211,153,0.22),
                  inset 0px 5px 12px rgba(52,211,153,0.12);
    }
    .drift-window-save-btn:hover:not(:disabled)::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(52,211,153,0.4) 0%,
        rgba(52,211,153,0.18) 100%
      );
    }
    .drift-window-save-btn:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .drift-window-save-btn.saving {
      opacity: 1;
      cursor: wait;
    }
    .drift-window-save-btn.is-saved {
      color: #34d399;
    }
    .drift-window-save-btn.is-saved:disabled {
      opacity: 0.82;
    }
    .drift-window-save-btn.is-error {
      color: #f87171;
    }
    .drift-window-save-btn .dw-save-a11y {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .drift-window-save-btn .dw-save-content {
      display: grid;
      grid-template-columns: var(--dw-save-status-balance) minmax(0, auto) var(--dw-save-status-balance);
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      pointer-events: none;
    }
    .drift-window-save-btn .dw-save-label-shell {
      grid-column: 2;
      position: relative;
      display: inline-grid;
      place-items: center;
      min-width: 0;
    }
    .drift-window-save-btn .dw-save-label-shell > * {
      grid-area: 1 / 1;
    }
    .drift-window-save-btn .dw-save-label-sizer,
    .drift-window-save-btn .dw-save-label {
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      white-space: nowrap;
    }
    .drift-window-save-btn .dw-save-label-sizer {
      visibility: hidden;
      pointer-events: none;
    }
    .drift-window-save-btn .dw-save-label-track {
      display: grid;
      place-items: center;
    }
    .drift-window-save-btn .dw-save-label-track > * {
      grid-area: 1 / 1;
    }
    .drift-window-save-btn .dw-save-label--save {
      opacity: 1;
      transform: translateX(0);
    }
    .drift-window-save-btn .dw-save-label--saved {
      opacity: 0;
      transform: translateX(2px);
    }
    .drift-window-save-btn .dw-save-status-layer {
      position: absolute;
      top: 50%;
      right: var(--dw-save-status-offset);
      width: var(--dw-save-status-size);
      height: var(--dw-save-status-size);
      transform: translateY(-50%);
      pointer-events: none;
      z-index: 1;
    }
    .drift-window-save-btn .dw-save-spinner,
    .drift-window-save-btn .dw-save-check,
    .drift-window-save-btn .dw-save-error {
      position: absolute;
      inset: 0;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
    }
    .drift-window-save-btn .dw-save-spinner {
      transition: opacity 160ms ease;
    }
    .drift-window-save-btn .dw-save-spinner-ring {
      box-sizing: border-box;
      width: 11px;
      height: 11px;
      border: 1.5px solid rgba(52,211,153,0.16);
      border-top-color: #34d399;
      border-right-color: rgba(255,255,255,0.82);
      border-radius: 50%;
      animation: spin 0.72s linear infinite;
      display: block;
      transform-origin: center;
    }
    .drift-window-save-btn .dw-save-check,
    .drift-window-save-btn .dw-save-error {
      transform: scale(0.82);
    }
    .drift-window-save-btn .dw-save-check svg,
    .drift-window-save-btn .dw-save-error svg {
      width: 12px;
      height: 12px;
      display: block;
    }
    .drift-window-save-btn.is-animating .dw-save-label,
    .drift-window-save-btn.is-animating .dw-save-check,
    .drift-window-save-btn.is-animating .dw-save-error {
      transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .drift-window-save-btn[data-save-state="saving"] .dw-save-spinner {
      opacity: 1;
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-label--save {
      opacity: 0;
      transform: translateX(5px);
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-label--saved {
      opacity: 1;
      transform: translateX(-4px);
    }
    .drift-window-save-btn[data-save-state="saved"] .dw-save-check,
    .drift-window-save-btn[data-save-state="error"] .dw-save-error {
      opacity: 1;
      transform: scale(1);
    }
    /* Counter flip animation for drift metric updates */
    @keyframes diCounterFlip {
      0%   { transform: translateY(0);   opacity: 1; }
      40%  { transform: translateY(-8px); opacity: 0; }
      60%  { transform: translateY(8px);  opacity: 0; }
      100% { transform: translateY(0);   opacity: 1; }
    }
    .di-val-flip {
      display: inline-block;
      animation: diCounterFlip 0.32s ease-in-out;
    }
    .di-hero-sublabel.di-val-flip,
    .di-hero-meta.di-val-flip {
      display: block;
    }
    @keyframes diChartMetricPulse {
      0%   { opacity: 0.74; filter: saturate(0.82); }
      100% { opacity: 1;    filter: saturate(1); }
    }
    .drift-chart-container.di-chart-metric-animating canvas {
      animation: diChartMetricPulse 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .drift-chart-container {
      position: relative;
      width: 100%;
      height: 280px;
    }
    @media (max-width: 640px) {
      .drift-chart-container { height: 220px; }
    }
    .mobile-chart-scroll {
      position: relative;
    }
    .mobile-chart-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .drift-chart-container canvas {
      width: 100% !important;
      height: 100% !important;
    }
    .mobile-chart-stage canvas {
      display: block;
      width: 100% !important;
      height: 100% !important;
    }
    .chart-mobile-landscape {
      --chart-mobile-aspect-ratio: 1.72;
      --chart-mobile-min-height: 176px;
      --chart-mobile-max-height: 210px;
    }
    .chart-mobile-landscape--inspector {
      --chart-mobile-aspect-ratio: 1.56;
      --chart-mobile-min-height: 188px;
      --chart-mobile-max-height: 226px;
    }
    .chart-mobile-landscape--elevation {
      --chart-mobile-aspect-ratio: 2.3;
      --chart-mobile-min-height: 136px;
      --chart-mobile-max-height: 168px;
    }
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 540px) {
      .chart-mobile-landscape {
        --chart-mobile-landscape-height: clamp(190px, 58vh, 260px);
      }
      .chart-mobile-landscape--inspector {
        --chart-mobile-landscape-height: clamp(204px, 64vh, 282px);
      }
      .chart-mobile-landscape--elevation {
        --chart-mobile-landscape-height: clamp(142px, 42vh, 188px);
      }
      html .drift-chart-container.chart-mobile-landscape {
        height: var(--chart-mobile-landscape-height, 240px) !important;
        min-height: 0;
        max-height: none;
        aspect-ratio: auto;
      }
      html .mobile-chart-scroll.chart-mobile-landscape {
        overflow-x: hidden;
        padding-bottom: 0;
      }
      html .mobile-chart-scroll.chart-mobile-landscape.is-zoomed {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
      }
      html .mobile-chart-scroll.chart-mobile-landscape.is-zoomed canvas {
        touch-action: pan-x pan-y;
      }
      html .chart-mobile-landscape .mobile-chart-stage,
      html .chart-mobile-landscape .mobile-chart-stage--bio,
      html .chart-mobile-landscape .mobile-chart-stage--envelope,
      html .chart-mobile-landscape .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
        height: 100%;
      }
      .di-elev-gps-row {
        grid-template-columns: 1fr;
      }
    }
    .drift-hr-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
    }
    .drift-hr-window-fill {
      position: absolute;
      top: 0;
      bottom: 0;
      border-radius: 0;
      overflow: hidden;
      z-index: 0;
    }
    .drift-hr-window-fill::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.05) 44%, rgba(255,42,85,0.15) 100%);
    }
    .drift-hr-window-fill--fresh::before {
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.06) 42%, rgba(255,42,85,0.18) 100%);
    }
    .drift-hr-window-fill--end::before {
      background: linear-gradient(180deg, rgba(255,42,85,0.02) 0%, rgba(255,42,85,0.06) 40%, rgba(255,42,85,0.22) 100%);
    }
    .drift-hr-window-accent {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.06) 52%,
          rgba(255,42,85,0.18) 58%,
          rgba(255,42,85,0.36) 66%,
          rgba(255,42,85,0.62) 74%,
          rgba(255,42,85,0.95) 100%
        ) left top / 2px 100% no-repeat,
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.06) 52%,
          rgba(255,42,85,0.18) 58%,
          rgba(255,42,85,0.36) 66%,
          rgba(255,42,85,0.62) 74%,
          rgba(255,42,85,0.95) 100%
        ) right top / 2px 100% no-repeat,
        linear-gradient(90deg, rgba(255,42,85,0.98) 0%, rgba(255,42,85,0.98) 100%) bottom left / 100% 2px no-repeat;
      box-shadow: 0 0 12px rgba(255,42,85,0.24);
    }
    .drift-hr-window-fill--end .drift-hr-window-accent {
      background:
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.07) 52%,
          rgba(255,42,85,0.20) 58%,
          rgba(255,42,85,0.40) 66%,
          rgba(255,42,85,0.66) 74%,
          rgba(255,42,85,0.96) 100%
        ) left top / 2px 100% no-repeat,
        linear-gradient(
          180deg,
          rgba(255,42,85,0.00) 0%,
          rgba(255,42,85,0.00) 46%,
          rgba(255,42,85,0.07) 52%,
          rgba(255,42,85,0.20) 58%,
          rgba(255,42,85,0.40) 66%,
          rgba(255,42,85,0.66) 74%,
          rgba(255,42,85,0.96) 100%
        ) right top / 2px 100% no-repeat,
        linear-gradient(90deg, rgba(255,42,85,0.99) 0%, rgba(255,42,85,0.99) 100%) bottom left / 100% 2px no-repeat;
      box-shadow: 0 0 12px rgba(255,42,85,0.28);
    }
    .drift-hr-window-tag {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transform: translate(-100%, -100%);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 0 10px rgba(0,0,0,0.4);
      z-index: 1;
    }
    .drift-hr-window-tag--fresh {
      color: #ff2a55;
    }
    .drift-hr-window-tag--end {
      color: #ff2a55;
    }
    .drift-hr-window-tag--compact .drift-hr-window-text {
      display: none;
    }
    .drift-hr-window-tag--icon-only .drift-hr-window-text {
      display: none;
    }
    .drift-hr-window-heart {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 0.82rem;
      height: 0.82rem;
      flex: 0 0 0.82rem;
      line-height: 1;
      color: #ef4444;
      filter: drop-shadow(0 0 10px rgba(239,68,68,0.35));
      transform-origin: center;
      animation: driftHrBeat var(--beat-duration, 0.48s) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
      animation-delay: var(--beat-delay, 0s);
    }
    .drift-hr-window-heart svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .drift-hr-window-text {
      color: inherit;
    }
    @keyframes driftHrBeat {
      0%, 100% { transform: scale(1); }
      15% { transform: scale(1.18); }
      28% { transform: scale(0.94); }
      42% { transform: scale(1.08); }
      58% { transform: scale(0.98); }
    }
    .drift-legend {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .drift-legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.5);
    }
    .drift-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    /* -- Drift Inspector Mobile Legend -- */
    .di-mobile-legend {
      display: none;
    }
    @media (max-width: 640px) {
      .di-mobile-legend {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 8px 2px;
      }
    }
    .di-ml-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.65rem;
      color: rgba(255,255,255,0.45);
    }
    .di-ml-line {
      display: inline-block;
      width: 16px;
      height: 0;
    }
    .di-ml-line--dashed {
      border-top-style: dashed;
    }
    .drift-stat-pills {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .drift-stat-pill {
      font-size: 0.7rem;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7);
    }
    .drift-stat-pill.fresh { color: #34d399; background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.2); }
    .drift-stat-pill.moderate { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.2); }
    .drift-stat-pill.fatigued { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.2); }

    /* -- Accuracy filter pills -- */
    .drift-filter-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .drift-filter-pill {
      font-size: 0.58rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 3px 9px;
      border-radius: 6px;
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(255,255,255,0.28);
      white-space: nowrap;
      transition: all 0.2s ease;
      user-select: none;
    }
    .drift-filter-pill:hover:not(.active) {
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.65);
      border-color: rgba(255,255,255,0.12);
    }
    .drift-filter-pill.active {
      color: #22d3ee;
      background: rgba(34,211,238,0.11);
      border-color: rgba(34,211,238,0.42);
      box-shadow: 0 0 10px rgba(34,211,238,0.16), inset 0 1px 0 rgba(34,211,238,0.14);
    }
    .drift-filter-pill.active.high-acc,
    .drift-filter-pill.active.med-acc,
    .drift-filter-pill.active.low-acc {
      color: #22d3ee;
      background: rgba(34,211,238,0.11);
      border-color: rgba(34,211,238,0.42);
      box-shadow: 0 0 10px rgba(34,211,238,0.16), inset 0 1px 0 rgba(34,211,238,0.14);
    }
    /* Envelope controls: keep runs aligned/right and pills responsive */
    #envelopeRunsControls {
      gap: 0;
      min-width: 240px;
      align-self: stretch;
      justify-content: flex-start;
    }
    #envelopeRunsPillsRow .drift-filter-bar {
      margin-left: 0;
      justify-content: flex-end;
      flex-wrap: wrap;
      row-gap: 4px;
      max-width: 100%;
    }
    #frpControlsGrid #envelopeRunsPillsRow {
      min-height: 38px;
    }
    #frpControlsGrid #envelopeRunsPillsRow .drift-filter-bar {
      justify-content: flex-start;
    }
    #envelopeRunsPillsRow .drift-filter-pill {
      font-size: clamp(0.5rem, 0.6vw, 0.58rem);
      padding: 2px clamp(6px, 0.75vw, 9px);
      letter-spacing: 0.05em;
    }
    @media (max-width: 1200px) {
      #envelopeRunsControls { min-width: 210px; }
      #envelopeRunsPillsRow .drift-filter-pill {
        font-size: clamp(0.48rem, 0.55vw, 0.54rem);
        padding: 2px 6px;
      }
    }

    /* -- Fatigue Resilience Profile ------------------------------------ */
    .resilience-summary-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }
    .resilience-summary-card {
      flex: 1 1 180px;
      min-width: 150px;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid rgba(34,211,238,0.18);
      background: rgba(34,211,238,0.05);
      transition: border-color 0.2s ease, background 0.2s ease;
      position: relative;
      overflow: visible;
    }
    .resilience-summary-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(34,211,238,0.35), transparent);
    }
    .resilience-summary-card .rsc-value {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }
    .resilience-summary-card .rsc-value .rsc-value-tooltip-mobile {
      display: none;
      vertical-align: middle;
      margin-left: 6px;
    }
    .resilience-summary-card .rsc-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }
    .resilience-summary-card .rsc-sub {
      font-size: 0.67rem;
      color: rgba(255,255,255,0.38);
      line-height: 1.45;
    }
    .resilience-summary-card .rsc-sub .rsc-sub-tooltip {
      display: inline-flex;
      vertical-align: middle;
      margin-left: 2px;
    }
    .resilience-summary-card .rsc-rate-tooltip {
      left: 50% !important;
      right: auto !important;
      transform: translate(-50%, 10px);
    }
    .resilience-summary-card .rsc-rate-tooltip::after {
      left: 50%;
      margin-left: -6px;
    }
    @media (min-width: 640px) {
      .resilience-summary-card .section-tooltip-trigger:hover .rsc-rate-tooltip {
        transform: translate(-50%, 0);
      }
    }
    .resilience-summary-card .section-tooltip-trigger.tooltip-active .rsc-rate-tooltip,
    .resilience-summary-card .rsc-rate-tooltip.tooltip-open {
      transform: translate(-50%, 0);
    }
    @media (max-width: 640px) {
      .resilience-summary-row {
        flex-wrap: nowrap;
        gap: 10px;
      }
      .resilience-summary-card {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 12px;
      }
      .resilience-summary-card .rsc-value {
        font-size: 1.45rem;
      }
      .resilience-summary-card .rsc-label {
        font-size: 0.62rem;
        margin-bottom: 4px;
      }
      .resilience-summary-card .rsc-sub {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-height: 14px;
        line-height: 1;
      }
      .resilience-summary-card .rsc-sub-copy {
        display: none;
      }
      .resilience-summary-card .rsc-sub .rsc-sub-tooltip {
        margin-left: 0;
      }
    }
    /* New-run banner below summary cards */
    .resilience-new-run-banner {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(46,209,244,0.04);
      border: 1px solid rgba(46,209,244,0.16);
      border-radius: 10px;
    }
    .resilience-new-run-label {
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: rgba(46,209,244,0.6);
      white-space: nowrap;
      padding-top: 3px;
    }
    .resilience-new-run-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      background: rgba(46,209,244,0.07);
      border: 1px solid rgba(46,209,244,0.2);
      border-radius: 7px;
      font-size: 0.68rem;
    }
    /* Matrix */
    .resilience-matrix-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 4px;
      font-size: 0.78rem;
    }
    .resilience-matrix-table th {
      color: rgba(255,255,255,0.4);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 8px;
      text-align: center;
    }
    .resilience-matrix-table .rmt-row-label {
      color: rgba(255,255,255,0.4);
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 4px 8px 4px 0;
      white-space: nowrap;
    }
    /* Premium tab buttons for envelope metric/axis */
    .env-tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      font-size: 0.67rem;
      font-weight: 600;
      border-radius: 6px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      letter-spacing: 0.01em;
      white-space: nowrap;
      position: relative;
      background: transparent;
    }
    .env-tab-btn.active::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(var(--btn-color-rgb, 34,211,238), 0.55) 0%,
        rgba(var(--btn-color-rgb, 34,211,238), 0.3) 100%
      );
    }
    .env-tab-btn:hover:not(.active) {
      background: rgba(var(--btn-color-rgb, 34,211,238), 0.07) !important;
      color: rgba(255,255,255,0.9) !important;
      box-shadow: inset 0px -5px 12px rgba(var(--btn-color-rgb, 34,211,238), 0.22),
                  inset 0px 5px 12px rgba(var(--btn-color-rgb, 34,211,238), 0.12);
    }
    .env-tab-btn:hover:not(.active)::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(var(--btn-color-rgb, 34,211,238), 0.4) 0%,
        rgba(var(--btn-color-rgb, 34,211,238), 0.18) 100%
      );
    }

    /* Fatigue envelope chart slide transitions when switching single metric */
    @keyframes envChartEnterGct {
      from { opacity: 0.4; transform: translateX(-14px); }
      to   { opacity: 1;   transform: translateX(0); }
    }
    @keyframes envChartEnterHr {
      from { opacity: 0.4; transform: translateX(14px); }
      to   { opacity: 1;   transform: translateX(0); }
    }
    .env-chart-entering-gct {
      animation: envChartEnterGct 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    .env-chart-entering-hr {
      animation: envChartEnterHr 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    /* Shoe use-case buttons */
    .use-case-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 30px;
      padding: 5px 9px;
      font-size: 13px !important;
      font-weight: 600;
      line-height: 1;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.025);
      color: rgba(226,232,240,0.58);
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      transition: transform 0.18s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    #shoeUseCaseTabs .use-case-btn {
      font-size: 13px !important;
    }
    .use-case-btn svg {
      flex-shrink: 0;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }
    .use-case-btn.active svg { opacity: 1; }
    .use-case-btn:hover:not(.active) {
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.75);
      border-color: rgba(255,255,255,0.15);
      transform: translateY(-1px);
    }
    .use-case-btn.is-pro-locked {
      opacity: 0.56;
      cursor: pointer;
    }
    .use-case-btn.is-pro-locked:hover:not(.active) {
      background: rgba(255,255,255,0.025);
      color: rgba(226,232,240,0.58);
      border-color: rgba(255,255,255,0.09);
      transform: none;
    }
    .use-case-pro-label {
      margin-left: 1px;
      width: 19px;
      height: 5px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: hidden;
      line-height: 0;
    }
    .use-case-pro-label img {
      display: block;
      width: 21px;
      max-width: none;
      height: auto;
    }
    .shoe-use-case-entitlements {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: -6px;
    }
    .shoe-use-case-entitlement {
      min-width: 0;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
    }
    .shoe-use-case-entitlement span {
      display: block;
      margin-bottom: 4px;
      font-size: 0.58rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      line-height: 1.1;
      text-transform: uppercase;
    }
    .shoe-use-case-entitlement strong {
      display: block;
      margin-bottom: 3px;
      color: rgba(255,255,255,0.86);
      font-size: 0.7rem;
      line-height: 1.28;
    }
    .shoe-use-case-entitlement small {
      display: block;
      color: rgba(255,255,255,0.42);
      font-size: 0.64rem;
      line-height: 1.35;
    }
    .shoe-use-case-entitlement--free {
      border-color: rgba(34,211,238,0.14);
      background: rgba(34,211,238,0.045);
    }
    .shoe-use-case-entitlement--free span {
      color: rgba(34,211,238,0.72);
    }
    .shoe-use-case-entitlement--pro {
      border-color: rgba(248,113,113,0.18);
      background: rgba(248,113,113,0.045);
    }
    .shoe-use-case-entitlement--pro span {
      color: rgba(248,113,113,0.78);
    }
    .shoe-use-case-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      z-index: 20;
      overflow: visible;
    }
    .shoe-use-case-header {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }
    .shoe-use-case-header h5 {
      margin: 0;
      font-size: 0.86rem;
      letter-spacing: 0.01em;
    }
    .run-type-tooltip {
      background: linear-gradient(135deg, rgb(13, 20, 33), rgb(22, 30, 45)) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      border-color: rgba(148, 163, 184, 0.32) !important;
      box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(46, 209, 244, 0.16),
        0 0 32px rgba(46, 209, 244, 0.12) !important;
      z-index: 2147483647 !important;
    }
    .run-type-tooltip::after {
      background: linear-gradient(135deg, rgb(13, 20, 33), rgb(22, 30, 45)) !important;
      border-color: rgba(148, 163, 184, 0.32) !important;
    }
    .shoe-use-case-tabs {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
      align-items: stretch;
      width: 100%;
      min-width: 0;
      gap: 10px;
    }
    .shoe-use-case-section {
      min-width: 0;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.025);
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .shoe-use-case-section--free,
    .shoe-use-case-section--pro {
      border-color: rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.03);
    }
    .shoe-use-case-section--pro {
      border-color: rgba(46,209,244,0.28);
      background:
        radial-gradient(circle at 82% 0%, rgba(46,209,244,0.16), transparent 42%),
        linear-gradient(145deg, rgba(46,209,244,0.075), rgba(255,255,255,0.028) 56%, rgba(8,13,30,0.42));
      box-shadow:
        0 0 28px rgba(46,209,244,0.08),
        inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .shoe-use-case-section-header {
      min-height: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .shoe-use-case-section-title {
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.56);
      white-space: nowrap;
    }
    .shoe-use-case-section--pro .shoe-use-case-section-title {
      color: #22d3ee;
    }
    .shoe-use-case-section-title--pro {
      font-size: 0.74rem;
      letter-spacing: 0.02em;
      text-transform: none;
      text-shadow: 0 0 12px rgba(34,211,238,0.36);
    }
    .shoe-use-case-section-logo {
      display: block;
      width: clamp(132px, 12vw, 172px);
      max-width: 100%;
      height: auto;
      filter:
        drop-shadow(0 5px 12px rgba(0,0,0,0.36))
        drop-shadow(0 0 14px rgba(46,209,244,0.22));
    }
    .shoe-use-case-section-buttons {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 5px;
    }
    @media (min-width: 900px) {
      .shoe-use-case-section {
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .shoe-use-case-section-header {
        justify-content: center;
        width: 100%;
      }
      .shoe-use-case-section-buttons {
        flex-wrap: nowrap;
        justify-content: center;
      }
      #shoeUseCaseTabs .shoe-use-case-section--pro .use-case-btn {
        padding-inline: 8px;
        font-size: 12px !important;
      }
    }
    .shoe-use-case-hint {
      margin-top: 0;
      min-height: 1.1em;
      padding-left: 2px;
      font-size: 0.68rem;
      color: rgba(255,255,255,0.42);
      line-height: 1.45;
    }

    .rmt-cell {
      text-align: center;
      padding: 10px 8px;
      border-radius: 8px;
      cursor: default;
      font-weight: 700;
      font-size: 0.85rem;
      border: 1px solid rgba(255,255,255,0.08);
      transition: filter 0.2s ease, transform 0.22s ease, box-shadow 0.25s ease, opacity 0.22s ease, border-color 0.25s ease, border-width 0.25s ease;
      min-width: 72px;
      line-height: 1.2;
    }
    .rmt-cell:hover:not(.rmt-active):not(.rmt-dimmed) {
      filter: brightness(1.2);
      transform: scale(1.02);
      border-color: rgba(255,255,255,0.18);
    }
    .rmt-cell.rmt-dimmed {
      opacity: 0.32;
      filter: saturate(0.2) brightness(0.6);
      transform: scale(0.98);
    }
    .rmt-cell.rmt-active {
      transform: scale(1.015);
      filter: brightness(1.09);
      border: 2px solid color-mix(in srgb, var(--usecase-color, #22d3ee) 80%, transparent) !important;
      box-shadow:
        inset 0 0 20px color-mix(in srgb, var(--usecase-color, #22d3ee) 11%, transparent),
        0 0 22px color-mix(in srgb, var(--usecase-color, #22d3ee) 18%, transparent);
    }
    .rmt-cell.is-tooltip-open:not(.rmt-dimmed) {
      filter: brightness(1.12);
      transform: scale(1.02);
      border-color: rgba(46,209,244,0.24);
    }
    /* ------------------------------------------------------------------- */

    .drift-shell-title {
      color: #ffffff !important;
      font-size: 1.55rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin: 0 0 8px 0;
    }
    .drift-shell-title,
    .drift-shell-title span:not([style*="color: #22d3ee"]) {
      color: #ffffff !important;
    }
    .drift-shell-title svg {
      color: #22d3ee !important;
    }
    .drift-shell-copy {
      color: rgba(255,255,255,0.42) !important;
      font-size: 0.95rem;
      line-height: 1.5;
      margin: 0 0 18px 0;
    }
    .drift-shell-copy strong {
      color: rgba(255,255,255,0.62) !important;
      font-weight: 600;
    }
    .drift-shell-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, rgba(34, 211, 238, 0.42) 0%, rgba(34, 211, 238, 0.2) 52%, transparent 100%);
      margin-bottom: 16px;
    }
    .drift-shell-score {
      display: none;
      margin-bottom: 16px;
      padding: 16px 20px;
      border-radius: 14px;
      background: linear-gradient(140deg, rgba(34, 211, 238,0.11), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01));
      border: 1px solid rgba(34, 211, 238,0.16);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255,255,255,0.06);
    }

    .drift-no-data {
      text-align: center;
      padding: 32px 16px;
      color: rgba(255,255,255,0.35);
      font-size: 0.85rem;
    }

    /* -- Biomechanical Profile - Key Metrics Cards -- */
    .bio-metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(0.65rem, 1.8vw, 0.8rem);
      width: 100%;
      box-sizing: border-box;
      margin-top: 20px;
      align-items: stretch;
    }
    @media (min-width: 641px) {
      .bio-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .bio-metrics-grid .bio-metric-card {
        min-width: 0;
        min-height: 88px;
        padding: clamp(0.55rem, 0.7vw, 0.7rem);
      }
    }
    @media (min-width: 1024px) {
      .bio-metrics-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
      .bio-metric-card[data-bio-metric="hr"] { grid-column: auto; }
    }
    @media (max-width: 1023px) {
      .bio-metric-card[data-bio-metric="hr"] { grid-column: 1 / -1; }
    }
    /* Phones show the short label (CAD); see "Compact phone signature" at the end. */
    .bio-card-label-compact {
      display: none;
    }
    .bio-metric-card--contextual { border-color: rgba(244,114,182,0.42) !important; }
    .bio-metric-card--contextual:hover,
    .bio-metric-card--contextual.bio-active { border-color: #F472B6 !important; }
    .bio-card-context-icon { display:inline-flex; width:15px; height:15px; margin-right:5px; color:#F472B6; vertical-align:-2px; }
    .bio-card-context-icon svg { width:100%; height:100%; stroke:currentColor; }
    .bio-context-overview { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); gap:1rem; align-items:center; }
    .bio-context-overview__identity { display:flex; align-items:center; gap:0.8rem; }
    .bio-context-overview__icon { width:42px; height:42px; color:#F472B6; }
    .bio-context-overview__icon svg { width:100%; height:100%; stroke:currentColor; }
    .bio-context-overview__eyebrow { color:#F472B6; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
    .bio-context-overview__value { padding:0.75rem; border:1px solid rgba(244,114,182,0.16); border-radius:0.85rem; background:rgba(244,114,182,0.035); }
    .bio-context-note { color:rgba(255,255,255,0.66); font-size:0.78rem; line-height:1.55; }
    @media (max-width:640px) { .bio-context-overview { grid-template-columns:1fr; } }
    .bio-metrics-grid > .bio-explanation-container {
      grid-column: 1 / -1;
      width: 100%;
    }
    .bio-metric-card {
      container-type: inline-size;
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
      border: 0.5px solid rgba(var(--card-glow-rgb, 255,255,255), 0.3);
      border-radius: 0.75rem;
      padding: clamp(0.9rem, 2vw, 1rem);
      cursor: pointer;
      transition:
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 0 0.5px rgba(var(--card-glow-rgb, 255,255,255), 0.1), 0 6px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 0;
    }
    /* Keep the cards free of backdrop blur so hover does not repaint neighboring cards. */
    .bio-metric-card:hover {
      border-color: rgba(255,255,255,0.22);
      box-shadow: 0 0 0 0.5px rgba(var(--card-glow-rgb, 255,255,255), 0.22), 0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    /* Sweep light across the eight pace metrics while the card lifts. */
    #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:focus-visible {
      outline: 2px solid rgba(var(--card-glow-rgb, 255,255,255), 0.8);
      outline-offset: 2px;
    }
    @media (min-width: 641px) and (hover: hover) and (pointer: fine) {
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:not(.bio-metric-card--pro-locked, .bio-metric-card--unavailable)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 27%, rgba(var(--card-glow-rgb, 255,255,255), 0.15) 50%, transparent 73%);
        opacity: 0;
        transform: translateX(-105%);
        transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
      }
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:not(.bio-metric-card--pro-locked, .bio-metric-card--unavailable):hover {
        border-color: rgba(var(--card-glow-rgb, 255,255,255), 0.7);
        box-shadow: 0 0 0 1px rgba(var(--card-glow-rgb, 255,255,255), 0.2),
                    0 0 22px rgba(var(--card-glow-rgb, 255,255,255), 0.18),
                    0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
      }
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:hover::after {
        opacity: 1;
        transform: translateX(105%);
      }
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:hover .bio-card-accent {
        filter: brightness(1.7);
      }
    }
    /* The light the blur let through, above phone widths (phones never had the blur). */
    @media (min-width: 641px) {
      .bio-metric-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.022) 100%);
      }
      /* A selected card is a stacking layer of its own, so there the tint lies over its background. */
      .bio-metric-card.bio-active::before {
        background: linear-gradient(160deg, rgba(255,255,255,0.034) 0%, rgba(255,255,255,0.019) 100%);
      }
    }
    .bio-metric-card.bio-active {
      z-index: 10;
    }
    .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) {
      opacity: 0.35;
      filter: saturate(0.15) brightness(0.6);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-active {
      opacity: 1;
      filter: saturate(0.92) brightness(0.99);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-active:not(.bio-metric-card--compare) {
      border-color: rgba(var(--card-glow-rgb, 255,255,255), 0.5);
      border-width: 1.5px;
      box-shadow: 0 0 0 1px rgba(var(--card-glow-rgb, 255,255,255), 0.12),
                  0 10px 32px -8px rgba(var(--card-glow-rgb, 255,255,255), 0.24),
                  inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-2px);
    }
    .bio-metrics-grid.has-active .bio-metric-card.bio-paired-active:not(.bio-active) {
      opacity: 0.74;
      filter: saturate(0.62) brightness(0.82);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.16), inset 0 0 0 1px rgba(255,255,255,0.04);
    }
    .bio-metric-card.bio-paired-active {
      z-index: 8;
    }
    @media (min-width: 641px) and (hover: hover) and (pointer: fine) {
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:not(.bio-metric-card--unavailable):hover {
        transform: translateY(-5px);
        z-index: 11;
        box-shadow: 0 0 0 1px rgba(var(--card-glow-rgb, 255,255,255), 0.24),
                    0 16px 34px rgba(0,0,0,0.3),
                    0 0 22px rgba(var(--card-glow-rgb, 255,255,255), 0.18),
                    inset 0 1px 0 rgba(255,255,255,0.1);
      }
    }
    .bio-metric-card--pro-locked {
      --card-glow-rgb: 34,211,238 !important;
      background: linear-gradient(160deg, rgba(148,163,184,0.07) 0%, rgba(15,23,42,0.72) 58%, rgba(8,19,32,0.78) 100%) !important;
      border-color: rgba(34,211,238,0.18) !important;
      box-shadow: 0 0 0 1px rgba(148,163,184,0.05), 0 8px 28px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05) !important;
    }
    .bio-metrics-grid.has-active .bio-metric-card--pro-locked.bio-active:not(.bio-metric-card--compare) {
      border-color: rgba(34,211,238,0.24) !important;
      box-shadow: 0 0 0 1px rgba(34,211,238,0.1), 0 10px 30px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    .bio-metric-card--pro-locked .bio-card-accent {
      background: linear-gradient(90deg, rgba(148,163,184,0.24), rgba(34,211,238,0.34), rgba(148,163,184,0.18)) !important;
    }
    .bio-metric-card--pro-locked .bio-card-glow {
      background: radial-gradient(ellipse at 50% 100%, rgba(34,211,238,0.08) 0%, rgba(148,163,184,0.025) 52%, transparent 80%) !important;
    }
    .bio-metric-card--pro-locked .bio-card-badge,
    .bio-metric-card--pro-locked .bio-card-value {
      color: rgba(203,213,225,0.72) !important;
    }
    .bio-pro-card-overlay {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      border-radius: inherit;
      pointer-events: none;
      z-index: 4;
      overflow: hidden;
    }
    .bio-pro-card-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(3,7,18,0.76), rgba(3,7,18,0.5));
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .bio-pro-card-overlay img {
      position: relative;
      z-index: 1;
      width: min(78%, 112px);
      height: auto;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
    }
    .bio-metric-card--pro-locked .bio-pro-card-overlay {
      display: flex;
    }
    .bio-metric-card--pro-locked .bio-card-inner {
      filter: blur(3.5px);
      opacity: 0.34;
      transform: scale(0.98);
    }
    .bio-card-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 100%;
      width: 100%;
      min-width: 0;
      gap: 0.15rem;
      position: relative;
      z-index: 2;
      transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
    }
    .bio-card-inner h3 {
      font-size: clamp(0.46rem, 7.2cqw, 0.74rem);
      line-height: 1.15;
      color: #e5e7eb !important;
      margin-bottom: 4px;
      animation: none !important;
      transition: none !important;
      max-width: 100%;
    }
    .bio-card-inner p {
      font-size: clamp(0.68rem, 11.6cqw, 1.2rem);
      line-height: 1.05;
      color: #fff;
      font-weight: 700;
      margin: 0;
    }
    .bio-card-inner .bio-card-unit {
      font-size: clamp(0.46rem, 6.2cqw, 0.82rem);
      font-weight: 400;
      color: rgba(255,255,255,0.35);
    }
    @keyframes bioValueFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0);  }
    }
    .bio-card-num {
      display: inline-block;
      animation: none !important;
      transition: color 0.35s ease;
    }
    .bio-card-badge {
      font-size: clamp(0.42rem, 6.4cqw, 0.6rem) !important;
      letter-spacing: clamp(0.02em, 0.55cqw, 0.08em) !important;
      transition: color 0.35s ease, opacity 0.2s ease;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-badge,
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-value {
      color: rgb(var(--card-glow-rgb, 156,163,175)) !important;
    }
    .bio-card-accent {
      transition: background 0.35s ease, filter 0.3s ease;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-accent {
      background: rgba(var(--card-glow-rgb, 156,163,175), 0.38) !important;
    }
    .bio-card-glow {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 70%;
      pointer-events: none;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.45s ease, background 0.45s ease;
    }
    .bio-card-glow.bio-glow-in {
      opacity: 1;
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-card-glow {
      background: radial-gradient(ellipse at 50% 100%, rgba(var(--card-glow-rgb, 156,163,175), 0.11) 0%, rgba(var(--card-glow-rgb, 156,163,175), 0.025) 52%, transparent 80%) !important;
    }
    .bio-card-value {
      transition: color 0.35s ease;
    }
    .bio-expand-arrow {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bio-metric-card:not(.bio-metric-card--pro-locked) .bio-expand-arrow path {
      stroke: rgba(var(--card-glow-rgb, 156,163,175), 0.46) !important;
      transition: stroke 0.35s ease;
    }
    @media (prefers-reduced-motion: reduce) {
      #bioProfileMetricsGrid .bio-metric-card[data-bio-metric]:hover {
        transform: none !important;
      }
      .bio-metric-card,
      .bio-card-badge,
      .bio-card-value,
      .bio-card-accent,
      .bio-card-glow,
      .bio-metric-card::after,
      .bio-expand-arrow path {
        animation: none !important;
        transition: none !important;
      }
      #bioProfileMetricsGrid .bio-metric-card::after {
        display: none;
      }
    }
    /* -- Explanation panel -- */
    .bio-explanation-container {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out, margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .bio-explanation-container--anchored {
      width: 100%;
    }
    .bio-explanation-box {
      --bio-accent: #94a3b8;
      --bio-accent-rgb: 148, 163, 184;
      position: relative;
      margin-top: 0.75rem;
      padding: 1.5rem 2rem;
      border-radius: 1rem;
      transform: translateY(-10px);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-out;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      overflow: visible;
    }
    #bioExplTriangle {
      z-index: 6;
      pointer-events: none;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      filter: drop-shadow(0 -1px 8px rgba(var(--bio-accent-rgb), 0.16));
    }
    .bio-expl-anim {
      animation: bioPanelRise 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .bio-expl-stack {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .bio-expl-hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
      gap: 1rem;
      align-items: stretch;
      padding: 1.1rem 1.15rem;
      border-radius: 1rem;
      border: 1px solid rgba(var(--bio-accent-rgb), 0.16);
      background:
        radial-gradient(circle at top right, rgba(var(--bio-accent-rgb), 0.11), transparent 44%),
        linear-gradient(145deg, rgba(255,255,255,0.05), rgba(var(--bio-accent-rgb), 0.045));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.14);
      transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, background 0.24s ease;
    }
    .bio-expl-hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 40%, transparent 80%);
      opacity: 0.55;
    }
    .bio-expl-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(var(--bio-accent-rgb), 0.78);
      margin-bottom: 0.65rem;
    }
    .bio-expl-kicker::before {
      content: '';
      width: 24px;
      height: 1px;
      background: rgba(var(--bio-accent-rgb), 0.44);
      box-shadow: 0 0 10px rgba(var(--bio-accent-rgb), 0.24);
    }
    .bio-expl-title {
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      font-weight: 700;
      color: #fff;
      margin: 0;
      padding: 0;
    }
    .bio-expl-title::after {
      display: none;
    }
    .bio-expl-pace-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
      margin-top: 0.75rem;
    }
    .bio-expl-pace-pill,
    .bio-expl-pace-note {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      border-radius: 9999px;
      padding: 0.4rem 0.8rem;
      font-size: 0.76rem;
      line-height: 1;
    }
    .bio-expl-pace-pill {
      color: #fff;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .bio-expl-pace-note {
      color: rgba(255,255,255,0.74);
      background: rgba(12, 17, 32, 0.34);
      border: 1px solid rgba(var(--bio-accent-rgb), 0.1);
      font-weight: 500;
    }
    .bio-expl-value-col {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.65rem;
      padding: 1rem;
      border-radius: 0.95rem;
      background: linear-gradient(180deg, rgba(9, 12, 24, 0.2), rgba(9, 12, 24, 0.42));
      border: 1px solid rgba(255,255,255,0.07);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bio-expl-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 0.35rem 0.85rem;
      border-radius: 9999px;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .bio-expl-badge--pro-logo {
      min-width: 66px;
      min-height: 30px;
      padding: 0.3rem 0.78rem;
      border: 1px solid rgba(148,163,184,0.22);
      background: linear-gradient(180deg, rgba(148,163,184,0.12), rgba(15,23,42,0.3)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(2,6,23,0.24) !important;
      opacity: 0.7;
      line-height: 0;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    button.bio-expl-badge--pro-logo {
      font: inherit;
    }
    .bio-expl-badge--pro-logo:hover,
    .bio-expl-badge--pro-logo:focus-visible {
      opacity: 0.88;
      border-color: rgba(148,163,184,0.34);
      background: linear-gradient(180deg, rgba(148,163,184,0.16), rgba(15,23,42,0.36)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 22px rgba(2,6,23,0.28), 0 0 16px rgba(46,209,244,0.08) !important;
      transform: translateY(-1px);
    }
    .bio-expl-badge--pro-logo img {
      display: block;
      width: 48px;
      max-width: none;
      height: auto;
      transform: translateY(0.5px);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35)) drop-shadow(0 0 8px rgba(46,209,244,0.12));
    }
    .bio-expl-value-row {
      display: flex;
      align-items: flex-end;
      gap: 0.4rem;
      line-height: 0.9;
    }
    .bio-expl-value {
      font-size: clamp(2rem, 4vw, 2.7rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
    }
    .bio-expl-unit {
      font-size: 0.95rem;
      font-weight: 600;
      color: rgba(255,255,255,0.72);
      padding-bottom: 0.22rem;
    }
    .bio-expl-delta {
      font-size: 0.8rem;
      font-weight: 700;
      color: rgba(255,255,255,0.9);
    }
    .bio-expl-summary-card,
    .bio-expl-content {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
    }
    .bio-expl-summary-card {
      padding: 1rem 1.1rem;
      background: linear-gradient(145deg, rgba(var(--bio-overall-rgb), 0.075), rgba(255,255,255,0.04));
      border: 1px solid rgba(var(--bio-overall-rgb), 0.16);
      box-shadow: 0 10px 28px rgba(0,0,0,0.12);
    }
    .bio-expl-summary-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .bio-expl-summary-label {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(var(--bio-overall-rgb), 0.9);
      margin-bottom: 0.45rem;
    }
    .bio-expl-summary-value {
      display: flex;
      align-items: baseline;
      gap: 0.55rem;
      flex-wrap: wrap;
    }
    .bio-expl-summary-value strong {
      font-size: 1.35rem;
      line-height: 1;
      color: var(--bio-overall-accent);
    }
    .bio-expl-summary-value span,
    .bio-expl-summary-copy,
    .bio-expl-conf-meta {
      color: rgba(255,255,255,0.7);
    }
    .bio-expl-summary-copy {
      margin: 0.6rem 0 0;
      font-size: 0.77rem;
      line-height: 1.58;
    }
    .bio-expl-confidence {
      min-width: 210px;
      flex: 0 1 245px;
    }
    .bio-expl-conf-row,
    .bio-expl-conf-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .bio-expl-conf-row {
      margin-bottom: 0.45rem;
    }
    .bio-expl-conf-row span:first-child {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.72);
    }
    .bio-expl-conf-row strong {
      font-size: 0.98rem;
      color: #fff;
    }
    .bio-expl-conf-bar {
      height: 10px;
      border-radius: 9999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .bio-expl-conf-fill {
      position: relative;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(var(--bio-overall-rgb), 0.45), rgba(var(--bio-overall-rgb), 0.96));
      box-shadow: 0 0 18px rgba(var(--bio-overall-rgb), 0.35);
      overflow: hidden;
    }
    .bio-expl-conf-fill::after {
      content: '';
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
      animation: bioShimmer 2.6s linear infinite;
    }
    .bio-expl-conf-meta {
      margin-top: 0.45rem;
      font-size: 0.72rem;
    }
    /* -- Distribution bar chart -- */
    .bio-dist-bar {
      display: flex;
      height: 22px;
      border-radius: 7px;
      overflow: hidden;
      gap: 2px;
      margin: 0.6rem 0 0.55rem;
    }
    .bio-dist-seg {
      flex-shrink: 0;
      opacity: 0.32;
      transition: opacity 0.18s;
    }
    .bio-dist-winner {
      opacity: 1;
    }
    .bio-dist-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem 1rem;
      margin-bottom: 0.55rem;
    }
    .bio-dist-leg-item {
      display: flex;
      align-items: center;
      gap: 0.38rem;
      font-size: 0.71rem;
    }
    .bio-dist-leg-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
      opacity: 0.55;
    }
    .bio-dist-leg-winner .bio-dist-leg-dot {
      opacity: 1;
    }
    .bio-dist-leg-label {
      color: rgba(255,255,255,0.6);
      font-weight: 500;
    }
    .bio-dist-leg-winner .bio-dist-leg-label {
      font-weight: 700;
    }
    .bio-dist-leg-count {
      color: rgba(255,255,255,0.38);
    }
    .bio-dist-leg-winner .bio-dist-leg-count {
      color: rgba(255,255,255,0.6);
    }
    .bio-expl-content {
      padding: 1.1rem;
      background: rgba(var(--bio-accent-rgb), 0.035);
      border: 1px solid rgba(var(--bio-accent-rgb), 0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, background 0.24s ease;
    }
    .bio-explanation-box.bio-switching .bio-expl-hero,
    .bio-explanation-box.bio-switching .bio-expl-content {
      opacity: 0.02;
      transform: translateY(10px) scale(0.995);
    }
    .bio-expl-desc {
      margin: 0 0 1rem;
      color: rgba(255,255,255,0.84);
      font-size: 0.83rem;
      line-height: 1.72;
    }
    .bio-expl-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
      gap: 0.9rem;
      align-items: stretch;
    }
    .bio-expl-why-card,
    .bio-expl-factors-card {
      border-radius: 0.95rem;
      padding: 0.95rem 1rem;
      background: rgba(7, 11, 22, 0.28);
      border: 1px solid rgba(var(--bio-accent-rgb), 0.09);
    }
    .bio-expl-why-card {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
    }
    .bio-expl-icon-wrap {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      flex: 0 0 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--bio-accent);
      background: linear-gradient(145deg, rgba(var(--bio-accent-rgb), 0.11), rgba(var(--bio-accent-rgb), 0.03));
      border: 1px solid rgba(var(--bio-accent-rgb), 0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.16);
    }
    .bio-expl-icon-wrap svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
    }
    .bio-expl-mini-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(var(--bio-accent-rgb), 0.72);
      margin-bottom: 0.35rem;
    }
    .bio-expl-mini-copy {
      margin: 0;
      color: rgba(255,255,255,0.84);
      font-size: 0.8rem;
      line-height: 1.58;
    }
    .bio-expl-factors-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.7rem;
    }
    .bio-expl-factor-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0.35rem 0.75rem;
      border-radius: 9999px;
      background: rgba(var(--bio-accent-rgb), 0.08);
      border: 1px solid rgba(var(--bio-accent-rgb), 0.16);
      color: #fff;
      font-size: 0.7rem;
      font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bio-overview-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-column: 1 / -1;
      width: 100%;
      grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.15fr) minmax(260px, 0.8fr);
      gap: 1rem;
      align-items: stretch;
    }
    .bio-overview-meta-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 0.9rem;
      min-width: 0;
      padding: 0.1rem 0;
    }
    .bio-overview-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      width: 100%;
      text-align: center;
    }
    .bio-overview-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
      width: 100%;
      min-width: 0;
    }
    .bio-overview-badge-row {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      flex-wrap: nowrap;
      max-width: 100%;
      min-width: 0;
      overflow: visible;
    }
    .bio-overview-badge-row .bio-inline-tooltip-trigger {
      position: absolute;
      left: calc(100% + 0.45rem);
      top: 50%;
      transform: translateY(-50%);
      margin: 0;
    }
    .bio-overview-kicker {
      color: rgba(229,231,235,0.74);
    }
    .bio-overview-kicker::before {
      background: rgba(229,231,235,0.32);
      box-shadow: none;
    }
    .bio-overview-meta {
      margin: 0;
      color: rgba(255,255,255,0.74);
      font-size: 0.82rem;
      line-height: 1.65;
    }
    .bio-overview-rankline {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.35rem;
    }
    .bio-overview-ranknote {
      color: rgba(255,255,255,0.84);
      font-size: 0.8rem;
      font-weight: 600;
    }
    .bio-overview-score-wrap {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      align-self: center;
      gap: 0.6rem;
      width: 100%;
      text-align: center;
    }
    .bio-overview-score-wrap .bio-overview-score-visual {
      align-self: center;
    }
    .bio-card-title-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
      flex-wrap: nowrap;
    }
    .bio-inline-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      vertical-align: middle;
      z-index: 10;
    }
    .bio-inline-tooltip-btn,
    .bio-runit-tooltip-btn {
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    }
    .bio-inline-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: rgba(255,255,255,0.55);
      box-shadow: none;
    }
    .bio-inline-tooltip-btn--compact {
      width: 22px;
      height: 22px;
    }
    .bio-inline-tooltip-btn svg {
      color: rgba(255,255,255,0.45);
    }
    .bio-inline-tooltip-btn:hover svg {
      color: rgba(255,255,255,0.75);
    }
    .bio-inline-tooltip-copy {
      margin: 0;
      font-size: 0.72rem;
      line-height: 1.55;
      color: rgba(255,255,255,0.72);
    }
    .bio-runit-inline {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      flex-wrap: nowrap;
      max-width: 100%;
      min-width: 0;
    }
    .bio-runit-inline--compact {
      gap: 0.3rem;
    }
    .bio-runit-pill,
    .bio-runit-tooltip-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      white-space: nowrap;
    }
    .bio-runit-pill {
      min-height: 28px;
      padding: 0.28rem 0.72rem 0.28rem 0.34rem;
      border-radius: 9999px;
      background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(8,145,178,0.12));
      border: 1px solid rgba(103,232,249,0.42);
      box-shadow: 0 0 20px rgba(34,211,238,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
      color: #cffafe;
      font-size: 0.63rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .bio-runit-circle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(34,211,238,0.22), rgba(8,145,178,0.15));
      border: 1.5px solid rgba(103,232,249,0.5);
      box-shadow: 0 0 14px rgba(34,211,238,0.22);
      flex-shrink: 0;
      cursor: pointer;
    }
    .bio-runit-circle--compact {
      width: 22px;
      height: 22px;
    }
    .bio-runit-circle img {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      object-fit: cover;
    }
    .bio-runit-circle--compact img {
      width: 13px;
      height: 13px;
    }
    .bio-runit-circle:hover {
      box-shadow: 0 0 20px rgba(34,211,238,0.38);
      border-color: rgba(103,232,249,0.72);
    }
    .bio-runit-pill img,
    .bio-runit-tooltip-pill img {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.14);
    }
    .bio-runit-pill--compact {
      min-height: 22px;
      padding: 0.18rem 0.48rem 0.18rem 0.24rem;
      gap: 0.28rem;
      font-size: 0.55rem;
      letter-spacing: 0.06em;
    }
    .bio-runit-pill--compact img {
      width: 14px;
      height: 14px;
    }
    .bio-runit-tooltip-trigger {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      z-index: 10;
    }
    .bio-runit-tooltip-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      min-width: 22px;
      padding: 0;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(103,232,249,0.28), rgba(34,211,238,0.18));
      border: 1px solid rgba(103,232,249,0.72);
      color: #ecfeff;
      box-shadow: 0 0 0 1px rgba(34,211,238,0.2), 0 0 18px rgba(34,211,238,0.42);
      font-size: 0.8rem;
      font-weight: 800;
      line-height: 1;
    }
    .bio-runit-tooltip-btn span {
      transform: translateY(-0.5px);
    }
    .bio-runit-tooltip-btn--compact {
      width: 18px;
      height: 18px;
      min-width: 18px;
      font-size: 0.72rem;
    }
    .bio-inline-tooltip-btn:hover,
    .bio-inline-tooltip-btn:focus-visible,
    .bio-runit-tooltip-btn:hover,
    .bio-runit-tooltip-btn:focus-visible {
      transform: scale(1.05);
    }
    .bio-runit-tooltip {
      min-width: 240px;
      max-width: 320px;
      padding: 0.88rem 0.95rem;
      background: linear-gradient(180deg, rgba(5,18,30,0.96), rgba(2,10,18,0.96));
      border: 1px solid rgba(103,232,249,0.45);
      box-shadow: 0 18px 34px rgba(2,8,23,0.58), 0 0 28px rgba(34,211,238,0.32);
      z-index: 2147483647 !important;
    }
    .bio-runit-tooltip--compact {
      min-width: 220px;
    }
    .bio-runit-tooltip-title {
      margin: 0 0 0.5rem;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: #ecfeff;
    }
    .bio-runit-tooltip-copy {
      margin: 0 0 0.9rem;
      font-size: 0.72rem;
      line-height: 1.55;
      color: rgba(236,254,255,0.82);
    }
    .bio-runit-tooltip-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.44rem;
      padding: 0.34rem 0.72rem 0.34rem 0.38rem;
      border-radius: 0.62rem;
      background: linear-gradient(135deg, rgba(34,211,238,0.2), rgba(8,145,178,0.12));
      border: 1px solid rgba(103,232,249,0.44);
      color: #e6fcff;
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      text-transform: none;
      white-space: nowrap;
      line-height: 1.1;
      cursor: pointer;
      text-decoration: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }
    .bio-runit-tooltip-pill:hover,
    .bio-runit-tooltip-pill:focus-visible {
      border-color: rgba(103,232,249,0.72);
      box-shadow: 0 0 18px rgba(34,211,238,0.24);
      transform: translateY(-1px);
      outline: none;
    }
    .bio-runit-tooltip-copy + .bio-runit-tooltip-pill,
    .bio-runit-tooltip .tooltip-tier + .bio-runit-tooltip-pill {
      margin-top: 0.72rem;
    }
    .bio-runit-tooltip-pill img {
      width: 15px;
      height: 15px;
      border-radius: 0;
      object-fit: contain;
      flex-shrink: 0;
      box-shadow: none;
    }
    .bio-overview-score-visual {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bio-overview-score-visual img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(var(--bio-accent-rgb), 0.35));
    }
    .bio-overview-score-mask {
      width: 100px;
      height: 100px;
      background: rgba(var(--bio-accent-rgb), 0.95);
      filter: drop-shadow(0 0 8px rgba(var(--bio-accent-rgb), 0.35));
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
    }
    .bio-overview-score-visual svg {
      width: 100px;
      height: 100px;
      color: rgba(var(--bio-accent-rgb), 0.95);
      stroke: currentColor;
    }
    .bio-overview-dist-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.7rem;
      min-width: 0;
    }
    .bio-overview-value-card {
      container-type: inline-size;
      align-items: center;
      gap: 0.5rem;
      min-height: 0;
      justify-content: center;
      text-align: center;
    }
    .bio-overview-value-card .bio-expl-value {
      font-size: clamp(1.35rem, 20cqw, 2.7rem);
    }
    .bio-overview-value-card .bio-expl-unit {
      font-size: clamp(0.62rem, 7cqw, 0.95rem);
    }
    .bio-overview-value-label {
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    .bio-overview-delta {
      color: rgba(255,255,255,0.74);
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1.45;
      text-align: center;
    }
    .bio-overview-filter-context {
      color: rgba(255,255,255,0.46);
      font-size: 0.66rem;
      font-weight: 600;
      line-height: 1.35;
      text-align: center;
      letter-spacing: 0.01em;
    }
    .bio-overview-value-card .bio-expl-value-row {
      justify-content: center;
    }
    .bio-overview-bars {
      --bio-overview-bar-track-width: 48px;
      --bio-overview-bar-track-height: 128px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.65rem;
      align-items: end;
      align-self: stretch;
    }
    .bio-overview-bar-col {
      /* Fill each equal grid column so label length cannot shrink the track. */
      width: 100%;
      grid-template-columns: minmax(0, 1fr);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.45rem;
      min-width: 0;
    }
    .bio-overview-bar-pct {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.08rem 0.16rem;
      min-height: 1em;
      font-size: 0.72rem;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      line-height: 1;
      text-align: center;
    }
    .bio-overview-bar-pct-main,
    .bio-overview-bar-pct-compare {
      display: inline-block;
      white-space: nowrap;
    }
    .bio-overview-bar-pct-compare {
      color: #22d3ee;
      font-size: 0.6rem;
    }
    .bio-overview-bar-track {
      width: min(100%, var(--bio-overview-bar-track-width));
      max-width: var(--bio-overview-bar-track-width);
      height: var(--bio-overview-bar-track-height);
      flex: 0 0 auto;
      display: flex;
      align-items: flex-end;
      border-radius: 16px;
      padding: 4px;
      background: rgba(8, 12, 24, 0.34);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bio-overview-bar-fill {
      width: 100%;
      border-radius: 12px;
      min-height: 0;
      transform-origin: bottom center;
      transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.24s ease, box-shadow 0.24s ease;
      will-change: height, opacity, transform;
    }
    .bio-overview-bar-label {
      font-size: 0.68rem;
      font-weight: 700;
      color: rgba(229,231,235,0.78);
      text-align: center;
      line-height: 1.15;
      transition: color 0.24s ease;
    }
    .bio-overview-bar-meta {
      font-size: 0.66rem;
      color: rgba(255,255,255,0.52);
      text-align: center;
      line-height: 1.25;
      transition: color 0.24s ease;
    }
    .bio-overview-bar-col.is-winner .bio-overview-bar-pct,
    .bio-overview-bar-col.is-winner .bio-overview-bar-label {
      color: var(--bio-overall-accent);
    }
    .bio-overview-bar-col.is-winner .bio-overview-bar-track {
      border-color: rgba(var(--bio-overall-rgb), 0.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(var(--bio-overall-rgb), 0.06);
    }
    @keyframes bioPanelRise {
      0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.985);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes bioShimmer {
      100% {
        transform: translateX(100%);
      }
    }
    @media (max-width: 840px) {
      .bio-expl-hero,
      .bio-expl-detail-grid {
        grid-template-columns: 1fr;
      }
      .bio-overview-grid {
        grid-template-columns: 1fr;
      }
      .bio-expl-value-col {
        align-items: flex-start;
      }
      .bio-overview-meta-col,
      .bio-overview-dist-col {
        gap: 0.8rem;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (max-width: 1180px) {
      .bio-explanation-box {
        padding: 0.85rem;
      }
      .bio-expl-hero {
        padding: 0.75rem;
      }
      .bio-overview-grid {
        grid-template-columns: minmax(150px, 0.72fr) minmax(260px, 1.38fr) minmax(210px, 0.9fr);
        gap: 0.65rem;
      }
      .bio-expl-title {
        font-size: clamp(1rem, 2vw, 1.18rem);
      }
      .bio-overview-badge-row {
        gap: 0.36rem;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg,
      .bio-overview-score-mask {
        width: 68px;
        height: 68px;
      }
      .bio-overview-bars {
        --bio-overview-bar-track-width: 34px;
        --bio-overview-bar-track-height: 112px;
        gap: clamp(0.24rem, 0.7vw, 0.38rem);
        min-width: 0;
      }
      .bio-overview-bar-col {
        gap: 0.28rem;
      }
      .bio-overview-bar-track {
        padding: 3px;
        border-radius: 13px;
      }
      .bio-overview-bar-fill {
        border-radius: 10px;
      }
      .bio-overview-bar-pct {
        font-size: 0.58rem;
        gap: 0.04rem 0.1rem;
      }
      .bio-overview-bar-pct-compare {
        font-size: 0.52rem;
      }
      .bio-overview-bar-label {
        max-width: 46px;
        font-size: 0.55rem;
        line-height: 1.05;
        overflow-wrap: normal;
      }
      .bio-overview-bar-meta {
        max-width: 44px;
        font-size: 0.54rem;
        line-height: 1.08;
      }
      .bio-overview-value-card {
        padding: 0.65rem;
      }
      .bio-overview-delta {
        font-size: 0.72rem;
      }
      .bio-overview-filter-context {
        font-size: 0.58rem;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (max-width: 940px) {
      .bio-overview-grid {
        grid-template-columns: minmax(126px, 0.58fr) minmax(248px, 1.48fr) minmax(188px, 0.82fr);
        gap: 0.48rem;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg,
      .bio-overview-score-mask {
        width: 56px;
        height: 56px;
      }
      .bio-overview-bar-track {
        height: var(--bio-overview-bar-track-height);
        max-width: var(--bio-overview-bar-track-width);
      }
    }
    @media (max-width: 640px) {
      .bio-explanation-container {
        position: relative;
        z-index: 10;
      }
      .bio-axis-header-label {
        padding-left: 24px;
      }
      .bio-explanation-box {
        padding: 0.75rem 0.85rem;
      }
      .bio-overview-grid {
        gap: 0.4rem;
        padding: 0;
      }
      .bio-overview-bars {
        gap: 0.2rem;
      }
      .bio-overview-bar-track {
        height: 70px;
        max-width: 100%;
      }
      .bio-overview-bar-label {
        font-size: 0.6rem;
      }
      .bio-overview-bar-meta {
        font-size: 0.58rem;
      }
      .bio-overview-bar-pct {
        font-size: 0.65rem;
      }
      .bio-overview-score-visual,
      .bio-overview-score-visual img,
      .bio-overview-score-visual svg {
        width: 48px;
        height: 48px;
      }
      .bio-overview-score-mask {
        width: 48px;
        height: 48px;
      }
      .bio-overview-value-card {
        padding: 0.3rem;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        align-items: center;
        text-align: center;
      }
      .bio-overview-value-card .bio-expl-value-row {
        width: 100%;
        justify-content: center;
      }
      .bio-overview-value-label,
      .bio-overview-delta,
      .bio-overview-filter-context {
        width: 100%;
        text-align: center;
      }
      .bio-overview-meta-col {
        padding: 0;
        gap: 0.4rem;
        align-items: center;
      }
      .bio-overview-dist-col {
        padding: 0;
        gap: 0.3rem;
      }
      .bio-overview-copy {
        gap: 0.35rem;
        align-items: center;
        text-align: center;
      }
      .bio-overview-heading {
        align-items: center;
      }
      .bio-overview-badge-row {
        justify-content: center;
      }
      .bio-overview-badge-row .bio-inline-tooltip-trigger {
        left: calc(100% + 0.35rem);
      }
      .bio-overview-score-wrap {
        gap: 0.45rem;
        align-items: center;
        text-align: center;
      }
      .bio-overview-score-wrap .bio-overview-score-visual {
        align-self: center;
      }
      .bio-expl-hero {
        padding: 0.6rem;
      }
      .bio-expl-content {
        padding: 0.6rem;
      }
      .bio-expl-summary-card {
        padding: 0.6rem;
      }
      .bio-overview-meta {
        font-size: 0.72rem;
      }
      .bio-expl-why-card {
        flex-direction: column;
      }
      .bio-expl-confidence {
        min-width: 0;
        width: 100%;
      }
      .bio-overview-grid {
        padding-bottom: 1rem;
        border-bottom: none;
        margin-bottom: 0.25rem;
      }
      .bio-runit-tooltip,
      .bio-runit-tooltip--compact {
        min-width: 0;
      }
    }

    /* -- Biomechanical Signature -- */
    .bio-sig-section {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(255,255,255,0.08);
    }
    .bio-sig-header {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    .bio-sig-title {
      font-size: clamp(0.82rem, 0.6rem + 0.6vw, 1rem);
      font-weight: 700;
      color: rgba(255,255,255,0.88);
      letter-spacing: -0.01em;
      margin: 0;
    }
    .bio-sig-run-count {
      font-size: 0.65rem;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.04em;
    }
    /* -- Main card -- */
    .bio-sig-card {
      border-radius: 1rem;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background:
        radial-gradient(circle at top right, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.07), transparent 48%),
        linear-gradient(156deg, rgba(20, 26, 38, 0.84), rgba(11, 15, 24, 0.76));
      padding: clamp(1.25rem, 2vw, 2rem) clamp(1.25rem, 2.5vw, 2.5rem);
      box-shadow: 0 8px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
      display: flex;
      flex-direction: column;
      gap: 0.95rem;
    }
    .bio-sig-empty-panel {
      min-height: 132px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.1rem;
      border-radius: 0.95rem;
      border: 1px solid rgba(46,209,244,0.14);
      background: linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.024));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .bio-sig-empty-icon {
      width: 72px;
      height: 72px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(46,209,244,0.08);
      border: 1px solid rgba(46,209,244,0.18);
      box-shadow: 0 0 18px rgba(46,209,244,0.09);
    }
    .bio-sig-empty-icon img {
      width: 46px;
      height: 46px;
      object-fit: contain;
      filter: brightness(0) saturate(100%) invert(76%) sepia(46%) saturate(1000%) hue-rotate(158deg) brightness(96%) contrast(94%);
    }
    .bio-sig-empty-title {
      margin: 0 0 0.35rem;
      color: rgba(255,255,255,0.86);
      font-size: clamp(0.9rem, 0.7rem + 0.55vw, 1.08rem);
      font-weight: 700;
      line-height: 1.2;
    }
    .bio-sig-empty-copy {
      margin: 0;
      max-width: 46rem;
      color: rgba(255,255,255,0.5);
      font-size: 0.78rem;
      line-height: 1.55;
    }
    @media (max-width: 640px) {
      .bio-sig-empty-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 1rem;
      }
    }
    /* -- Desktop three-column top row -- */
    .bio-sig-hero {
      display: grid;
      grid-template-columns: minmax(180px, 0.88fr) minmax(0, 1fr) minmax(0, 1.08fr);
      gap: 0.95rem;
      align-items: stretch;
      margin-bottom: 0;
    }
    /* -- Tablet -- */
    @media (min-width: 641px) and (max-width: 1024px) {
      .bio-sig-card {
        padding: 1.1rem 1.15rem;
      }
      .bio-sig-hero {
        grid-template-columns: minmax(220px, 0.92fr) minmax(0, 1fr);
        gap: 0.85rem;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 0.9rem 0.95rem;
      }
      .bio-sig-dist-panel {
        grid-column: 1 / -1;
      }
      .bio-sig-dominant-panel,
      .bio-sig-metrics-panel {
        grid-column: 1 / -1;
      }
    }
    @media (orientation: landscape) and (max-height: 600px) and (min-width: 641px) and (max-width: 1180px) {
      .bio-sig-card {
        padding: 0.85rem;
        gap: 0.75rem;
      }
      .bio-sig-hero {
        grid-template-columns: minmax(136px, 0.64fr) minmax(272px, 1.42fr) minmax(148px, 0.78fr);
        gap: 0.65rem;
      }
      .bio-sig-dist-panel {
        grid-column: auto;
      }
      .bio-sig-dominant-panel,
      .bio-sig-metrics-panel {
        grid-column: auto;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 0.72rem;
        border-radius: 0.85rem;
      }
      .bio-sig-panel-label {
        margin-bottom: 0.45rem;
      }
      .bio-sig-pattern-badge {
        font-size: 0.52rem;
        padding: 3px 8px;
      }
      .bio-sig-icon-col {
        gap: 0.45rem;
      }
      .bio-sig-icon-wrap {
        min-height: clamp(54px, 14vh, 78px);
        padding: 0.3rem;
      }
      .bio-sig-icon-wrap img {
        width: clamp(48px, 10vh, 66px);
        height: clamp(48px, 10vh, 66px);
      }
      .bio-sig-dist-shell {
        width: min(100%, 300px);
      }
      .bio-sig-dist-bars {
        gap: clamp(0.24rem, 0.7vw, 0.42rem);
      }
      .bio-sig-dist-track {
        height: clamp(76px, 26vh, 108px);
        max-width: 34px;
      }
      .bio-sig-dist-label {
        max-width: 44px;
        font-size: 0.56rem;
      }
      .bio-sig-dist-meta {
        font-size: 0.54rem;
      }
      .bio-sig-metrics-grid {
        gap: 0.48rem;
      }
      .bio-sig-metric-icon-box {
        padding: 0.55rem;
      }
      .bio-sig-desc,
      .bio-sig-shoe-text {
        font-size: 0.76rem;
        line-height: 1.5;
      }
    }
    .bio-sig-panel,
    .bio-sig-explainer,
    .bio-sig-dominant-panel {
      min-width: 0;
      border-radius: 0.95rem;
      padding: 0.95rem 1rem;
      background: linear-gradient(180deg, rgba(255,255,255,0.042), rgba(255,255,255,0.024));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .bio-sig-dominant-panel {
    @media (min-width: 641px) and (max-width: 1024px) {
      #envelopeControlsGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        padding: 12px 14px;
      }
      #envelopeControlsGrid > .frp-control-group {
        padding-right: 0;
        margin-right: 0;
        border-right: none;
      }
      #envelopeRunsControls {
        grid-column: 1 / -1;
        min-width: 0;
        padding-left: 0;
        padding-top: 12px;
        border-top: 1px solid rgba(255,255,255,0.07);
      }
      #envelopeRunsPillsRow .drift-filter-bar {
        justify-content: flex-start;
      }
    }
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      text-align: center;
    }
    .bio-sig-icon-col {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.8rem;
      min-height: 100%;
    }
    .bio-sig-pattern-badge {
      font-size: 0.58rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #fff;
      padding: 4px 10px;
      border-radius: 9999px;
      white-space: nowrap;
    }
    .bio-sig-icon-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.55rem;
      min-height: clamp(82px, 10vw, 118px);
    }
    .bio-sig-icon-wrap img {
      width: clamp(64px, 8vw, 100px);
      height: clamp(64px, 8vw, 100px);
      object-fit: contain;
      transition: filter 0.3s ease;
    }
    .bio-sig-type-label {
      font-size: clamp(0.82rem, 0.6rem + 0.5vw, 1rem);
      font-weight: 700;
      margin: 0;
    }
    .bio-sig-type-pct {
      font-size: 0.64rem;
      font-weight: 600;
      color: rgba(255,255,255,0.45);
      line-height: 1.45;
      margin: 0;
    }
    .bio-sig-panel-label {
      display: block;
      width: 100%;
      margin-bottom: 0.7rem;
      color: rgba(229,231,235,0.68);
    }
    .bio-sig-metrics-panel {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }
    .bio-sig-metrics-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      width: 100%;
      align-items: flex-start;
      justify-content: center;
    }
    .bio-sig-metric-ind {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      transform: scale(0.7);
      opacity: 0;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }
    .bio-sig-metric-ind.bio-sig-scale-in {
      transform: scale(1);
      opacity: 1;
    }
    .bio-sig-metric-ind:hover {
      transform: scale(1) translateY(-3px);
    }
    .bio-sig-metric-ind:hover .bio-sig-metric-icon-box {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 18px -10px var(--glow-color-low), 0 4px 16px -4px var(--glow-color-high);
      border-color: rgba(255,255,255,0.4);
    }
    .bio-sig-metric-icon-box {
      border-radius: 0.75rem;
      padding: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 16px -12px var(--glow-color-low, rgba(46,209,244,0.12));
      transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .bio-sig-metric-icon-box img {
      width: 24px;
      height: 24px;
    }
    /* -- Metric tooltip -- */
    .bio-sig-metric-tooltip {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(8px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      z-index: 100;
      pointer-events: none;
      white-space: nowrap;
    }
    .bio-sig-metric-ind:hover .bio-sig-metric-tooltip {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }
    .bio-sig-metric-tooltip-inner {
      background: linear-gradient(135deg, rgba(17,24,39,0.98), rgba(31,41,55,0.98));
      backdrop-filter: blur(12px);
      border-radius: 10px;
      padding: 8px 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.4);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      min-width: 210px;
      max-width: min(300px, calc(100vw - 24px));
      white-space: normal;
    }
    .bio-sig-metric-tooltip-inner--value-only {
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 140px;
      max-width: min(220px, calc(100vw - 24px));
      padding: 9px 14px;
      text-align: center;
      white-space: normal;
    }
    .bio-sig-metric-tooltip-label {
      color: rgba(255,255,255,0.72);
      font-size: 0.72rem;
      letter-spacing: 0;
      text-transform: none;
    }
    .bio-sig-metric-tooltip-value {
      color: #fff;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 9999px;
    }
    .bio-sig-metric-tooltip-arrow {
      position: absolute;
      bottom: -5px;
      left: 50%;
      width: 10px;
      height: 10px;
      background: rgba(17,24,39,0.98);
      transform: translateX(-50%) rotate(45deg);
      border-radius: 2px;
    }
    /* -- Distribution vertical bars -- */
    .bio-sig-dist-panel {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      text-align: center;
    }
    .bio-sig-dist-panel .bio-sig-panel-label,
    .bio-sig-metrics-panel .bio-sig-panel-label {
      text-align: center;
    }
    @media (min-width: 641px) {
      .bio-sig-metrics-panel {
        justify-content: center;
        align-items: center;
        gap: 0.7rem;
        min-height: 100%;
      }
      .bio-sig-metrics-panel .bio-sig-panel-label {
        margin-bottom: 0;
        width: auto;
      }
      .bio-sig-metrics-panel .bio-sig-metrics-grid {
        width: auto;
        max-width: 100%;
        align-items: center;
      }
    }
    .bio-sig-dist-shell {
      width: min(100%, 252px);
      margin: 0 auto;
    }
    .bio-sig-dist-bars {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 0.5rem;
      align-items: end;
    }
    .bio-sig-dist-col {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 0.4rem;
      min-width: 0;
      cursor: pointer;
      outline: none;
      isolation: isolate;
      transition: transform 0.18s ease;
    }
    .bio-sig-dist-col::before {
      content: '';
      position: absolute;
      inset: -0.25rem -0.2rem -0.3rem;
      border-radius: 0.9rem;
      background: linear-gradient(180deg, rgba(46,209,244,0.12), rgba(46,209,244,0.02));
      border: 1px solid rgba(46,209,244,0.16);
      opacity: 0;
      transition: opacity 0.18s ease, border-color 0.18s ease;
      pointer-events: none;
      z-index: 0;
    }
    .bio-sig-dist-col > * {
      position: relative;
      z-index: 1;
    }
    .bio-sig-dist-pct {
      font-size: 0.7rem;
      font-weight: 700;
      color: rgba(255,255,255,0.7);
      line-height: 1;
    }
    .bio-sig-dist-pct-compare {
      display: inline-block;
      margin-left: 0.18rem;
      font-size: 0.62rem;
      color: #22d3ee;
    }
    .bio-sig-dist-track {
      width: 100%;
      max-width: 42px;
      height: 100px;
      display: flex;
      align-items: flex-end;
      border-radius: 14px;
      padding: 3px;
      background: rgba(15, 21, 32, 0.28);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .bio-sig-dist-track--compare {
      gap: 2px;
    }
    .bio-sig-dist-fill {
      width: 100%;
      border-radius: 11px;
      min-height: 0;
      transform-origin: bottom center;
      transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.18s ease, box-shadow 0.18s ease;
    }
    .bio-sig-dist-track--compare .bio-sig-dist-fill {
      width: auto;
      flex: 1 1 0;
      min-width: 0;
    }
    .bio-sig-dist-fill--compare {
      background: linear-gradient(to top, rgba(34,211,238,0.68), rgba(34,211,238,0.36)) !important;
      box-shadow: 0 4px 12px rgba(34,211,238,0.14) !important;
      border: 1px solid rgba(34,211,238,0.3);
    }
    .bio-sig-dist-icon {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
    }
    .bio-sig-dist-label {
      font-size: 0.62rem;
      font-weight: 700;
      color: rgba(229,231,235,0.7);
      text-align: center;
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .bio-sig-dist-meta {
      font-size: 0.6rem;
      color: rgba(255,255,255,0.45);
      text-align: center;
      line-height: 1.2;
    }
    .bio-sig-dist-col:hover,
    .bio-sig-dist-col:focus-visible,
    .bio-sig-dist-col.is-tooltip-open {
      transform: translateY(-1px);
    }
    .bio-sig-dist-col:hover::before,
    .bio-sig-dist-col:focus-visible::before,
    .bio-sig-dist-col.is-tooltip-open::before {
      opacity: 1;
      border-color: rgba(var(--bio-sig-type-rgb, 46,209,244), 0.22);
    }
    .bio-sig-dist-col:hover .bio-sig-dist-track,
    .bio-sig-dist-col:focus-visible .bio-sig-dist-track,
    .bio-sig-dist-col.is-tooltip-open .bio-sig-dist-track {
      border-color: rgba(var(--bio-sig-type-rgb, 46,209,244), 0.26);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(var(--bio-sig-type-rgb, 46,209,244), 0.08);
    }
    .bio-sig-dist-col:hover .bio-sig-dist-fill,
    .bio-sig-dist-col:focus-visible .bio-sig-dist-fill,
    .bio-sig-dist-col.is-tooltip-open .bio-sig-dist-fill {
      filter: saturate(1.08) brightness(1.04);
    }
    .bio-sig-dist-col:focus-visible {
      box-shadow: 0 0 0 1px rgba(46,209,244,0.22);
      border-radius: 0.9rem;
    }
    .bio-sig-dist-col.is-dominant .bio-sig-dist-pct,
    .bio-sig-dist-col.is-dominant .bio-sig-dist-label {
      color: var(--bio-sig-dom-color, #fff);
    }
    .bio-sig-dist-col.is-dominant .bio-sig-dist-track {
      border-color: var(--bio-sig-dom-border, rgba(255,255,255,0.25));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px var(--bio-sig-dom-glow, rgba(255,255,255,0.08));
    }
    .bio-sig-dist-tooltip {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: min(280px, calc(100vw - 24px));
      padding: 0.8rem 0.85rem;
      border-radius: 0.95rem;
      background: linear-gradient(180deg, rgba(3,9,18,0.98), rgba(7,16,29,0.94));
      border: 1px solid rgba(46,209,244,0.18);
      box-shadow: 0 18px 42px rgba(0,0,0,0.45), 0 0 0 1px rgba(46,209,244,0.05);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(6px) scale(0.985);
      transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
      color: rgba(255,255,255,0.92);
    }
    .bio-sig-dist-tooltip.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .bio-sig-dist-tooltip::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 1px solid rgba(var(--bio-sig-tooltip-rgb, 46,209,244), 0.14);
      pointer-events: none;
    }
    .bio-sig-dist-tooltip-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.55rem;
    }
    .bio-sig-dist-tooltip-title-wrap {
      min-width: 0;
    }
    .bio-sig-dist-tooltip-kicker {
      display: block;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(46,209,244,0.74);
      margin-bottom: 0.18rem;
    }
    .bio-sig-dist-tooltip-title {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: #f8fafc;
      line-height: 1.2;
    }
    .bio-sig-dist-tooltip-count {
      flex-shrink: 0;
      font-size: 0.68rem;
      font-weight: 600;
      color: rgba(255,255,255,0.56);
    }
    .bio-sig-dist-tooltip-list {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      max-height: min(240px, calc(100vh - 120px));
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding-right: 0.15rem;
      touch-action: pan-y;
    }
    .bio-sig-dist-tooltip-list::-webkit-scrollbar {
      width: 4px;
    }
    .bio-sig-dist-tooltip-list::-webkit-scrollbar-thumb {
      background: rgba(46,209,244,0.18);
      border-radius: 999px;
    }
    .bio-sig-dist-tooltip-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.42rem 0.55rem;
      border-radius: 0.7rem;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.04);
    }
    .bio-sig-dist-tooltip-date {
      font-size: 0.74rem;
      font-weight: 600;
      color: rgba(255,255,255,0.9);
    }
    .bio-sig-dist-tooltip-detail {
      font-size: 0.7rem;
      color: rgba(255,255,255,0.58);
      white-space: nowrap;
    }
    .bio-sig-dist-tooltip-empty {
      font-size: 0.74rem;
      line-height: 1.5;
      color: rgba(255,255,255,0.62);
    }
    .matrix-run-tooltip {
      width: min(300px, calc(100vw - 24px));
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-list {
      max-height: min(240px, calc(100vh - 140px));
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-item {
      align-items: flex-start;
    }
    .matrix-run-tooltip .bio-sig-dist-tooltip-detail {
      max-width: 58%;
      text-align: right;
      white-space: normal;
    }
    /* -- Explanation surface -- */
    .bio-sig-explainer {
      display: block;
    }
    .bio-sig-explainer-copy {
      min-width: 0;
    }
    .bio-sig-desc {
      color: rgba(255,255,255,0.85);
      line-height: 1.7;
      margin: 0 0 0.8rem 0;
      font-size: 0.8rem;
    }
    .bio-sig-shoe-divider {
      height: 1px;
      margin-bottom: 0.75rem;
    }
    .bio-sig-shoe-text {
      color: rgba(255,255,255,0.7);
      line-height: 1.6;
      margin: 0;
      font-size: 0.8rem;
    }
    /* -- Mobile -- */
    @media (max-width: 640px) {
      .bio-sig-card {
        padding: 1rem;
        gap: 1rem;
      }
      .bio-sig-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      .bio-sig-dominant-panel,
      .bio-sig-panel,
      .bio-sig-explainer {
        padding: 1rem;
      }
      .bio-sig-icon-col {
        min-height: auto;
      }
      .bio-sig-icon-wrap {
        min-height: auto;
        padding: 0.4rem;
      }
      .bio-sig-icon-wrap img {
        width: 64px;
        height: 64px;
      }
      .bio-sig-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
      }
      .bio-sig-metrics-grid {
        gap: 0.5rem;
      }
      .bio-sig-metric-icon-box {
        padding: 0.6rem;
      }
      .bio-sig-metric-icon-box img {
        width: 20px;
        height: 20px;
      }
      .bio-sig-dist-shell {
        width: 100%;
      }
      .bio-sig-dist-track {
        height: 80px;
        max-width: 36px;
      }
      .bio-sig-dist-bars {
        gap: 0.35rem;
      }
      .bio-sig-dist-label {
        font-size: 0.56rem;
      }
      .bio-sig-dist-tooltip {
        width: min(260px, calc(100vw - 20px));
        padding: 0.72rem 0.75rem;
      }
      .bio-sig-dist-tooltip-list {
        max-height: min(190px, calc(100vh - 120px));
      }
    }

    /* -- Bio Bracket Slider -- */
    /* -- Bio Period Picker -- */
    .bio-period-picker {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .bio-profile-controls {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.5vw, 14px);
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .bio-period-label {
      font-size: clamp(10px, 1.2vw, 11px);
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      white-space: nowrap;
    }
    .bio-period-select {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 24px 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      background-color: rgba(148, 163, 184, 0.09);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(148,163,184,0.8)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      color: rgba(255, 255, 255, 0.92);
      outline: none;
      cursor: pointer;
      transition: border-color 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
    }
    .bio-period-select:hover,
    .bio-period-select:focus {
      border-color: rgba(148, 163, 184, 0.6);
      background-color: rgba(148, 163, 184, 0.14);
    }
    .bio-period-select--loading {
      opacity: 0.55;
      pointer-events: none;
    }
    .bio-shoe-select {
      min-width: clamp(100px, 14vw, 160px);
      max-width: 200px;
    }
    @media (max-width: 640px) {
      .bio-controls-wrap {
        align-items: flex-start;
      }
      .bio-profile-controls {
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
      }
      .bio-shoe-select {
        min-width: 0;
        flex: 1 1 100px;
        max-width: none;
      }
      .bio-date-input {
        width: clamp(82px, 30vw, 110px) !important;
      }
    }
    /* -- Date range picker & compare controls -- */
    .bio-controls-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: flex-end;
      margin-top: 10px;
    }
    .bio-date-range-wrap {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .bio-date-presets {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .bio-preset-pill {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 8px;
      border: 1px solid rgba(148,163,184,0.28);
      background: rgba(148,163,184,0.07);
      color: rgba(255,255,255,0.55);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .bio-preset-pill:hover {
      border-color: rgba(148,163,184,0.55);
      background: rgba(148,163,184,0.15);
      color: rgba(255,255,255,0.88);
    }
    .bio-preset-pill.bio-preset-active {
      border-color: rgba(148,163,184,0.75);
      background: rgba(148,163,184,0.22);
      color: #94a3b8;
    }
    .bio-preset-pill--compare {
      border-color: rgba(34,211,238,0.28);
      background: rgba(34,211,238,0.07);
      color: rgba(255,255,255,0.5);
    }
    .bio-preset-pill--compare:hover {
      border-color: rgba(34,211,238,0.55);
      background: rgba(34,211,238,0.15);
      color: rgba(255,255,255,0.88);
    }
    .bio-preset-pill--compare.bio-preset-active {
      border-color: rgba(34,211,238,0.75);
      background: rgba(34,211,238,0.22);
      color: #67e8f9;
    }
    .bio-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 22px 0 16px;
    }
    .bio-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    .bio-section-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }
    .bio-date-inputs {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .bio-date-shell,
    .bio-select-shell {
      --bio-control-rgb: 46, 209, 244;
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      border-radius: 10px;
      background: rgba(10, 16, 30, 0.58);
      color: rgba(255,255,255,0.9);
      box-shadow: inset 0 0 0 1px rgba(var(--bio-control-rgb), 0.12);
      transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
      overflow: hidden;
    }
    .bio-date-shell::before,
    .bio-select-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(var(--bio-control-rgb), 0.3) 0%, rgba(var(--bio-control-rgb), 0.14) 100%);
    }
    .bio-date-shell:hover,
    .bio-date-shell:focus-within,
    .bio-select-shell:hover,
    .bio-select-shell:focus-within {
      background: rgba(var(--bio-control-rgb), 0.07);
      box-shadow: inset 0 -5px 12px rgba(var(--bio-control-rgb), 0.22), inset 0 5px 12px rgba(var(--bio-control-rgb), 0.12);
      transform: translateY(-1px);
    }
    .bio-date-shell:hover::before,
    .bio-date-shell:focus-within::before,
    .bio-select-shell:hover::before,
    .bio-select-shell:focus-within::before {
      background: linear-gradient(90deg, rgba(var(--bio-control-rgb), 0.42) 0%, rgba(var(--bio-control-rgb), 0.2) 100%);
    }
    .bio-date-shell--compare,
    .bio-select-shell--compare {
      background: rgba(9, 24, 33, 0.42);
    }
    .bio-date-shell {
      flex: 1 1 0;
      min-width: 0;
      width: clamp(136px, 15vw, 168px);
      cursor: pointer;
    }
    .bio-date-display {
      width: 100%;
      padding: 0 38px 0 12px;
      font-size: 0.92rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: 0.01em;
      color: rgba(255,255,255,0.92);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
      pointer-events: none;
    }
    .bio-date-shell.is-empty .bio-date-display {
      color: rgba(255,255,255,0.48);
    }
    .bio-date-icon {
      position: absolute;
      right: 11px;
      top: 50%;
      width: 15px;
      height: 15px;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: 0.88;
    }
    .bio-date-icon::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Crect x='2.2' y='3.3' width='10.6' height='9.1' rx='1.8' stroke='rgba(229,247,255,0.9)' stroke-width='1.2' fill='none'/%3E%3Cpath d='M4.6 1.9v2.6M10.4 1.9v2.6M2.2 6.1h10.6' stroke='rgba(103,232,249,0.92)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .bio-date-input {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100%;
      min-width: 0;
      min-height: 100%;
      margin: 0;
      padding: 0;
      border: none;
      opacity: 0;
      background: transparent !important;
      color: transparent;
      outline: none;
      cursor: pointer;
      color-scheme: dark;
    }
    .bio-date-input::-webkit-calendar-picker-indicator {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    .bio-date-input::-webkit-datetime-edit,
    .bio-date-input::-webkit-datetime-edit-text,
    .bio-date-input::-webkit-datetime-edit-month-field,
    .bio-date-input::-webkit-datetime-edit-day-field,
    .bio-date-input::-webkit-datetime-edit-year-field {
      color: transparent;
    }
    .bio-date-input:disabled,
    .bio-date-input--compare:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    .bio-date-sep {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.38);
      flex-shrink: 0;
    }
    /* Compare toggle button - see .rii-compare-btn in dashboard-embed.css */
    /* Compare controls second row - (base styles below in \u201eBio Controls Grid\u201c section) */
    .bio-compare-label {
      color: rgba(34,211,238,0.75) !important;
      white-space: nowrap;
    }
    .bio-period-select--compare {
      border-color: rgba(34,211,238,0.35) !important;
      background-color: rgba(34,211,238,0.07) !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(34,211,238,0.8)' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
    }
    .bio-period-select--compare:hover,
    .bio-period-select--compare:focus {
      border-color: rgba(34,211,238,0.6) !important;
      background-color: rgba(34,211,238,0.12) !important;
    }
    .bio-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 22px 0 16px;
    }
    .bio-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    .bio-section-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
    }

    /* -- Bio Controls Grid (envelope-style) -- */
    .bio-cg-wrap {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
      gap: 0;
      align-items: flex-start;
      margin: 10px 0 0;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: 10px;
      padding: 14px 18px;
      transition: border-radius 0.28s ease, border-bottom-color 0.28s ease;
    }
    .bio-cg-wrap.bio-compare-open {
      border-bottom-color: transparent;
      border-radius: 10px 10px 0 0;
    }
    .bio-cg-col {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding-right: 14px;
      min-width: 0;
    }
    .bio-cg-col--sep {
      margin-right: 14px;
      border-right: 1px solid rgba(255,255,255,0.07);
    }
    .bio-cg-label {
      font-size: 0.55rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.25);
      white-space: nowrap;
      margin-bottom: 1px;
    }
    .bio-cg-runs {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .bio-cg-runs-count {
      font-size: 0.9rem;
      font-weight: 700;
      color: rgba(255,255,255,0.75);
      line-height: 1;
    }
    .bio-cg-runs-sampled {
      font-size: 0.6rem;
      color: rgba(255,255,255,0.28);
      white-space: nowrap;
    }
    .bio-cg-compare-runs {
      display: flex;
      flex-direction: column;
      gap: 1px;
      min-height: 22px;
      justify-content: center;
    }
    .bio-cg-compare-runs--loading {
      justify-content: flex-start;
    }
    .bio-cg-compare-runs-loading {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(34,211,238,0.72);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .bio-cg-compare-runs-spinner {
      width: 12px;
      height: 12px;
      border: 1.75px solid rgba(34,211,238,0.18);
      border-top-color: rgba(103,232,249,0.95);
      border-radius: 50%;
      animation: proc-spin 1s linear infinite;
      filter: drop-shadow(0 0 6px rgba(34,211,238,0.28));
      flex: 0 0 auto;
    }
    .bio-cg-compare-runs-count {
      font-size: 0.85rem;
      font-weight: 700;
      color: rgba(34,211,238,0.8);
      line-height: 1;
    }
    .bio-cg-compare-runs-sampled {
      font-size: 0.6rem;
      color: rgba(34,211,238,0.42);
      white-space: nowrap;
    }
    /* Compare row below the grid */
    .bio-compare-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
      gap: 0;
      align-items: flex-start;
      background: rgba(34,211,238,0.025);
      border: 1px solid rgba(255,255,255,0.07);
      border-top: 1px solid rgba(34,211,238,0.14);
      border-radius: 0 0 10px 10px;
      padding: 0 18px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.35s ease, opacity 0.28s ease, padding 0.28s ease;
      margin-top: 0;
    }
    .bio-compare-controls.bio-compare-controls--visible {
      max-height: 280px;
      opacity: 1;
      overflow: visible;
      padding: 10px 18px;
    }
    .bio-mobile-control-stack {
      display: none;
    }
    .bio-mobile-control-row {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
      box-shadow: 0 10px 24px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255,255,255,0.06);
      color: #f8fafc;
      text-align: left;
      transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    }
    .bio-mobile-control-row:hover,
    .bio-mobile-control-row:focus-visible {
      border-color: rgba(148,163,184,0.3);
      background: linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.028));
      box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255,255,255,0.08);
      transform: translateY(-1px);
      outline: none;
    }
    .bio-mobile-control-row--compare {
      border-color: rgba(34,211,238,0.14);
      background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(34,211,238,0.02));
    }
    .bio-mobile-control-row--compare:hover,
    .bio-mobile-control-row--compare:focus-visible {
      border-color: rgba(34,211,238,0.28);
      background: linear-gradient(135deg, rgba(34,211,238,0.11), rgba(34,211,238,0.035));
    }
    .bio-mobile-control-row.is-open,
    .bio-mobile-control-row.is-active {
      border-color: rgba(103,232,249,0.34);
      box-shadow: 0 16px 34px rgba(8, 47, 73, 0.26), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .bio-mobile-control-chip {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 62px;
      padding: 0.38rem 0.62rem;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.22);
      background: rgba(15, 23, 42, 0.52);
      color: rgba(255,255,255,0.82);
      font-size: 0.64rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .bio-mobile-control-row--compare .bio-mobile-control-chip {
      border-color: rgba(34,211,238,0.24);
      background: rgba(8, 47, 73, 0.38);
      color: #67e8f9;
    }
    .bio-mobile-control-summary {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 0.74rem;
      line-height: 1.35;
      color: rgba(226,232,240,0.74);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bio-mobile-control-row.is-active .bio-mobile-control-summary,
    .bio-mobile-control-row.is-open .bio-mobile-control-summary {
      color: rgba(248,250,252,0.9);
    }
    .bio-mobile-control-chevron {
      flex: 0 0 auto;
      width: 10px;
      height: 10px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      color: rgba(226,232,240,0.62);
      transform: rotate(45deg);
      transition: transform 0.22s ease, color 0.22s ease;
    }
    .bio-mobile-control-row.is-open .bio-mobile-control-chevron {
      transform: rotate(225deg);
      color: rgba(248,250,252,0.88);
    }
    @media (min-width: 781px) {
      .bio-cg-wrap,
      .bio-compare-controls {
        grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.95fr) minmax(120px, 0.7fr);
      }
    }
    @media (max-width: 640px) {
      html[data-run-it-native-shell="1"] #biomechanicalProfileSection > div:first-child,
      html[data-run-it-native-shell="1"] #fatigueResilienceSection > div:first-child {
        margin-bottom: 6px !important;
      }

      html[data-run-it-native-shell="1"] #biomechanicalProfileSection .drift-shell-divider,
      html[data-run-it-native-shell="1"] #fatigueResilienceSection .drift-shell-divider {
        margin: 0 0 8px !important;
      }

      .bio-section-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px 0 12px;
      }
      .bio-section-intro .drift-shell-copy {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        font-size: 0.8rem;
        line-height: 1.4;
      }
      .bio-section-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin: 0;
      }
      .frp-section-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 8px;
      }
      .frp-section-intro .drift-shell-copy {
        flex: 0 1 auto;
        max-width: 100%;
        font-size: 0.8rem;
        line-height: 1.4;
        margin: 0;
      }
      .frp-section-actions {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
      }
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .bio-compare-controls.bio-compare-controls--visible {
        padding: 8px;
      }
      #biomechanicalProfileSection .bio-section-actions {
        display: none !important;
      }
      #biomechanicalProfileSection .bio-mobile-control-stack {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 10px !important;
      }
      #fatigueResilienceSection .frp-mobile-control-stack {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 10px !important;
      }
      #bioControlsGrid {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
      }
      #bioControlsGrid.bio-mobile-panel-open {
        display: grid !important;
      }
      #frpControlsGrid {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
        padding: 12px !important;
        border-radius: 16px !important;
      }
      #frpControlsGrid.bio-mobile-panel-open {
        display: grid !important;
      }
      #frpControlsGrid .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
      #frpControlsGrid .bio-date-shell,
      #frpControlsGrid .bio-select-shell {
        width: 100% !important;
        min-height: 34px !important;
      }
      #frpControlsGrid .bio-date-display,
      #frpControlsGrid .bio-period-select {
        font-size: 12px !important;
      }
      #bioCompareControls {
        display: none !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 0 !important;
        padding: 12px !important;
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        border-radius: 16px !important;
        border-top-color: rgba(34,211,238,0.18) !important;
      }
      #bioCompareControls.bio-compare-controls--visible {
        display: grid !important;
      }
      /* Compare period spans full width; Shoe + Runs sit side by side below */
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }
      .bio-cg-col--sep {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
    }
    #biomechanicalProfileSection .bio-cg-wrap .bio-date-shell,
    #biomechanicalProfileSection .bio-cg-wrap .bio-select-shell {
      --bio-control-rgb: 148, 163, 184;
    }
    #biomechanicalProfileSection .bio-date-shell {
      width: clamp(138px, 15vw, 172px);
      min-height: 40px;
    }

    #biomechanicalProfileSection .bio-date-display {
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    #biomechanicalProfileSection .bio-select-shell {
      min-height: 40px;
    }
    .frp-section-intro {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin: 14px 0 16px;
    }
    .frp-section-intro .drift-shell-copy {
      margin: 0;
      flex: 1 1 520px;
      max-width: 760px;
    }
    #fatigueResilienceSection .frp-cg-wrap {
      margin: 10px 0 1.5rem;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-date-shell,
    #fatigueResilienceSection .frp-cg-wrap .bio-select-shell {
      --bio-control-rgb: 46, 209, 244;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-date-shell {
      width: clamp(136px, 15vw, 168px);
      min-height: 38px;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-select-shell {
      min-height: 38px;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-date-display {
      font-size: 0.92rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select {
      width: 100%;
      font-size: 0.82rem;
      font-weight: 600;
      padding: 8px 28px 8px 12px;
      min-height: auto;
      border: none !important;
      border-radius: 10px;
      background-color: transparent !important;
      background-position: right 10px center;
      background-size: 10px 6px;
      letter-spacing: normal;
      box-shadow: none !important;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select:hover,
    #fatigueResilienceSection .frp-cg-wrap .bio-period-select:focus {
      border-color: transparent !important;
      background-color: transparent !important;
    }
    #fatigueResilienceSection .frp-cg-wrap .bio-shoe-select {
      min-width: max-content;
      max-width: none;
    }
    @media (min-width: 761px) {
      #fatigueResilienceSection .frp-cg-wrap {
        grid-template-columns: minmax(300px, 1.35fr) minmax(190px, 0.9fr) minmax(252px, 1.08fr);
      }
      #fatigueResilienceSection .frp-cg-wrap .frp-confidence-filter-col {
        margin-right: 0;
        padding-right: 0;
        border-right: none;
      }
      #frpControlsGrid #envelopeRunsPillsRow .drift-filter-bar {
        gap: 4px;
        min-height: 38px;
      }
      #frpControlsGrid #envelopeRunsPillsRow .drift-filter-pill {
        font-size: 0.58rem;
        padding: 3px 9px;
        letter-spacing: 0.07em;
      }
    }
    .frp-axis-header-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.18s ease;
    }
    .frp-axis-header-overlay.visible { opacity: 1; }
    .frp-axis-header {
      position: absolute;
      top: 6px;
      display: none;
      color: rgba(209,213,219,0.72);
      font-size: 8px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
      font-family: 'Inter', system-ui, sans-serif;
      text-shadow: 0 1px 2px rgba(0,0,0,0.44);
    }
    @media (max-width: 640px) {
      .frp-axis-header {
        display: inline-flex;
      }
    }
    #biomechanicalProfileSection .bio-period-select {
      width: 100%;
      font-size: 0.92rem;
      font-weight: 600;
      padding: 0 34px 0 12px;
      min-height: 40px;
      border: none !important;
      border-radius: 10px;
      background-color: transparent !important;
      background-position: right 12px center;
      background-size: 10px 6px;
      letter-spacing: normal;
      box-shadow: none !important;
    }
    #biomechanicalProfileSection .bio-period-select:hover,
    #biomechanicalProfileSection .bio-period-select:focus {
      border-color: transparent !important;
      background-color: transparent !important;
    }
    #biomechanicalProfileSection .bio-shoe-select {
      min-width: clamp(140px, 15vw, 184px);
      max-width: none;
    }
    #biomechanicalProfileSection .bio-compare-controls {
      margin-left: 0;
    }
    /* Compare metrics row */
    .bio-compare-metrics-row {
      margin-top: 10px;
      padding: 10px 14px 14px;
      border-radius: 12px;
      border: 1px solid rgba(34,211,238,0.18);
      background: rgba(34,211,238,0.03);
    }
    .bio-compare-metrics-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(34,211,238,0.65);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .bio-compare-metrics-label::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 2px;
      background: #22d3ee;
      border-radius: 2px;
      flex-shrink: 0;
    }
    @media (max-width: 640px) {
      .bio-date-input { width: 100px; }
      .bio-compare-controls { justify-content: flex-start; }
    }
    .owned-shoes-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }
    .owned-shoe-card {
      position: relative;
      border-radius: 20px;
      padding: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    }
    .owned-shoe-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .owned-shoe-purpose-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      color: rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.08);
    }
    .owned-shoe-card[data-purpose="daily"] .owned-shoe-purpose-tag { background: rgba(59,130,246,0.16); color: #93c5fd; }
    .owned-shoe-card[data-purpose="tempo"] .owned-shoe-purpose-tag { background: rgba(249,115,22,0.16); color: #fdba74; }
    .owned-shoe-card[data-purpose="race"] .owned-shoe-purpose-tag { background: rgba(239,68,68,0.16); color: #fca5a5; }
    .owned-shoe-target {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.72);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .owned-shoe-target strong { color: #fff; font-size: 1rem; }
    .owned-shoe-range {
      font-size: 0.68rem;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.66);
    }
    .owned-shoe-range.great { border-color: rgba(46, 209, 244,0.35); color: #67e8f9; }
    .owned-shoe-range.good { border-color: rgba(52,211,153,0.3); color: #86efac; }
    .owned-shoe-best {
      margin-bottom: 14px;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .owned-shoe-best-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }
    .owned-shoe-best-main {
      min-width: 0;
      flex: 1;
    }
    .owned-shoe-best-label {
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.48);
      margin-bottom: 8px;
    }
    .owned-shoe-best-name {
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }
    .owned-shoe-best-sub {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.68);
      line-height: 1.5;
    }
    .owned-shoe-media {
      width: 76px;
      height: 52px;
      flex: 0 0 auto;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
      padding: 6px;
    }
    .owned-shoe-media.sm {
      width: 54px;
      height: 40px;
      border-radius: 10px;
      padding: 4px;
    }
    .owned-shoe-media img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 10px 16px rgba(0,0,0,0.24));
    }
    .owned-shoe-tier {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    .owned-shoe-tier.great { background: rgba(46, 209, 244,0.14); border-color: rgba(46, 209, 244,0.35); color: #67e8f9; }
    .owned-shoe-tier.good { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.32); color: #86efac; }
    .owned-shoe-tier.not-ideal { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); color: #fde68a; }
    .owned-shoe-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .owned-shoe-row {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-top: 1px solid rgba(255,255,255,0.07);
    }
    .owned-shoe-rank {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.74rem;
      font-weight: 700;
      color: rgba(255,255,255,0.84);
      background: rgba(255,255,255,0.08);
    }
    .owned-shoe-row-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .owned-shoe-row-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .owned-shoe-row-meta {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.56);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .owned-shoe-row-score {
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }
    .owned-shoe-row-lpi {
      font-size: 0.72rem;
      color: #2ed1f4;
      font-weight: 700;
    }
    .owned-shoe-estimate {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.72);
      font-weight: 600;
    }
    .owned-shoe-row-note {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.64);
      line-height: 1.45;
      margin-top: 6px;
    }
    .owned-shoe-empty {
      padding: 14px;
      border-radius: 14px;
      background: rgba(255,255,255,0.04);
      border: 1px dashed rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.62);
      font-size: 0.8rem;
      line-height: 1.6;
    }
    .owned-shoe-footnote {
      margin-top: 14px;
      font-size: 0.76rem;
      color: rgba(255,255,255,0.56);
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
    }
    @media (max-width: 1024px) {
      .owned-shoes-grid {
        grid-template-columns: 1fr;
      }
    }
    @media (max-width: 640px) {
      .owned-shoe-best-top {
        align-items: flex-start;
      }
      .owned-shoe-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
      }
      .owned-shoe-row .owned-shoe-media.sm {
        display: none;
      }
    }

    .bio-bracket-slider-wrap {
      padding: 12px 0 4px;
      padding-right: max(0px, calc(var(--ca-right, 11px) - 11px));
      position: relative;
      user-select: none;
      touch-action: pan-y pinch-zoom;
      overscroll-behavior-y: auto;
    }
    .bio-bracket-slider-wrap input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 9999px;
      background: transparent;
      outline: none;
      cursor: pointer;
      touch-action: pan-y pinch-zoom;
      --fill-pct: 50%;
      --bio-selected-slider-track-glow-rgb: 119, 232, 249;
      --bio-selected-slider-track-core-rgb: 84, 220, 247;
      --bio-selected-slider-track-start-rgb: 7, 26, 35;
      --bio-selected-slider-track-mid-rgb: 13, 52, 67;
      --bio-selected-slider-track-end-rgb: 9, 34, 44;
      --bio-selected-slider-track-border-rgb: 102, 225, 248;
      --bio-selected-slider-track-shadow-rgb: 6, 18, 24;
      --bio-selected-slider-thumb-core-rgb: 9, 37, 47;
      --bio-selected-slider-thumb-edge-rgb: 20, 94, 113;
      --bio-selected-slider-thumb-ring-rgb: 104, 222, 247;
      --bio-selected-slider-thumb-depth-rgb: 6, 24, 31;
      --bio-selected-slider-thumb-shadow-rgb: 46, 209, 244;
      --bio-selected-slider-thumb-bg: rgba(var(--bio-selected-slider-thumb-depth-rgb), 0.96);
      --bio-selected-slider-thumb-bg-active: rgba(var(--bio-selected-slider-thumb-edge-rgb), 0.98);
    }
    .bio-bracket-slider-wrap input[type=range]::-webkit-slider-runnable-track {
      background:
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.24) var(--fill-pct, 50%), rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 100%),
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-start-rgb), 0.94) 0%, rgba(var(--bio-selected-slider-track-mid-rgb), 0.94) 52%, rgba(var(--bio-selected-slider-track-end-rgb), 0.94) 100%);
      height: 8px;
      border-radius: 9999px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 12px rgba(var(--bio-selected-slider-track-glow-rgb), 0.06),
        0 0 0 1px rgba(4, 14, 20, 0.42),
        0 4px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.34);
      transition: box-shadow 160ms ease;
    }
    @property --fill-pct {
      syntax: '<percentage>';
      inherits: true;
      initial-value: 50%;
    }
    .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      touch-action: pan-y pinch-zoom;
      width: 20px;
      height: 20px;
      margin-top: -7px;
      border-radius: 50%;
      background: var(--bio-selected-slider-thumb-bg);
      cursor: pointer;
      border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.9);
      box-shadow:
        0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.12),
        0 0 16px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14),
        0 6px 12px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.28);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    @media (pointer: coarse), (max-width: 640px) {
      #biomechanicalProfileSection,
      #biomechanicalProfileSection .biomech-signature-card,
      #biomechanicalProfileSection .drift-chart-container,
      #biomechanicalProfileSection .drift-chart-container canvas,
      #biomechanicalProfileSection .bio-pace-overlay,
      #biomechanicalProfileSection .bio-slider-runs-dots,
      #biomechanicalProfileSection .bio-metrics-grid,
      #biomechanicalProfileSection .bio-metric-card,
      #biomechanicalProfileSection .bio-sig-section,
      #biomechanicalProfileSection .bio-sig-card {
        touch-action: pan-y pinch-zoom;
        overscroll-behavior-y: auto;
      }
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-thumb,
    .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-thumb {
      transform: scale(1.05);
      background: var(--bio-selected-slider-thumb-bg-active);
      box-shadow:
        0 0 0 4px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.16),
        0 0 18px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.2),
        0 6px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.32);
      border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-webkit-slider-runnable-track,
    .bio-bracket-slider-wrap input[type=range]:active::-webkit-slider-runnable-track {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 0 14px rgba(var(--bio-selected-slider-track-glow-rgb), 0.08),
        0 0 0 1px rgba(var(--bio-selected-slider-track-border-rgb), 0.16),
        0 6px 18px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.38);
    }
    @media (pointer: coarse), (max-width: 640px) {
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-webkit-slider-runnable-track {
        transition: none;
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,0.04),
          0 0 0 1px rgba(4, 14, 20, 0.42);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-webkit-slider-thumb {
        transform: none;
        transition: none;
        box-shadow: 0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-track,
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-progress {
        transition: none;
        box-shadow: none;
      }
      .bio-bracket-slider-wrap.bio-slider-dragging input[type=range]::-moz-range-thumb {
        transform: none;
        transition: none;
        box-shadow: 0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14);
      }
      .bio-bracket-slider-wrap.bio-slider-dragging .bio-slider-run-dot {
        transition: background-color 80ms linear, transform 80ms linear !important;
      }
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-track {
      background:
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.24) var(--fill-pct, 50%), rgba(var(--bio-selected-slider-track-core-rgb), 0.12) 100%),
        linear-gradient(90deg, rgba(var(--bio-selected-slider-track-start-rgb), 0.94) 0%, rgba(var(--bio-selected-slider-track-mid-rgb), 0.94) 52%, rgba(var(--bio-selected-slider-track-end-rgb), 0.94) 100%);
      height: 8px;
      border-radius: 9999px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.18);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 12px rgba(var(--bio-selected-slider-track-glow-rgb), 0.06),
        0 0 0 1px rgba(4, 14, 20, 0.42),
        0 4px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.34);
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-progress {
      background: linear-gradient(90deg, rgba(var(--bio-selected-slider-track-core-rgb), 0.4) 0%, rgba(var(--bio-selected-slider-track-core-rgb), 0.26) 100%);
      height: 8px;
      border: 1px solid rgba(var(--bio-selected-slider-track-border-rgb), 0.12);
      border-radius: 9999px;
    }
    .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--bio-selected-slider-thumb-bg);
      cursor: pointer;
      border: 2px solid rgba(var(--bio-selected-slider-thumb-ring-rgb), 0.9);
      box-shadow:
        0 0 0 3px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.12),
        0 0 16px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.14),
        0 6px 12px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.28);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    }
    .bio-bracket-slider-wrap input[type=range]:hover::-moz-range-thumb,
    .bio-bracket-slider-wrap input[type=range]:active::-moz-range-thumb {
      transform: scale(1.05);
      background: var(--bio-selected-slider-thumb-bg-active);
      box-shadow:
        0 0 0 4px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.16),
        0 0 18px rgba(var(--bio-selected-slider-thumb-shadow-rgb), 0.2),
        0 6px 14px rgba(var(--bio-selected-slider-track-shadow-rgb), 0.32);
      border-color: rgba(var(--bio-selected-slider-thumb-ring-rgb), 1);
    }
    .bio-slider-label {
      margin-top: 14px;
      text-align: center;
      font-size: 0.85rem;
      color: #cbd5e1;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-shadow: 0 0 15px rgba(148, 163, 184, 0.6);
      transition: color 0.3s, transform 0.3s;
    }
    .bio-slider-sub {
      text-align: center;
      font-size: 0.65rem;
      color: rgba(255,255,255,0.4);
      margin-top: 4px;
      margin-bottom: 6px;
      transition: color 0.3s;
    }
    .bio-slider-runs-dots {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 24px;
      padding: 0 8px; /* inline with thumb */
      margin-bottom: 8px;
      gap: 4px;
    }
    .bio-slider-run-dot {
      flex: 1;
      border-radius: 3px 3px 0 0;
      transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      min-height: 2px;
      opacity: 0.4;
    }
    .bio-slider-run-dot.active {
      opacity: 1;
      box-shadow: 0 -7px 22px rgba(var(--bio-selected-slider-shadow-rgb, 46, 209, 244), 0.34), 0 0 0 1px rgba(var(--bio-selected-slider-ring-rgb, 46, 209, 244), 0.22);
    }
    .bio-slider-run-dot.active.bio-slider-run-dot--new {
      box-shadow: 0 -7px 22px rgba(var(--bio-selected-slider-shadow-rgb, 46, 209, 244), 0.4), 0 0 0 1px rgba(var(--bio-selected-slider-ring-rgb, 46, 209, 244), 0.28) !important;
    }
    .bio-slider-run-dot--new {
      box-shadow: 0 -6px 16px rgba(46, 209, 244, 0.5) !important;
    }
    @keyframes bioNewBarGrow {
      from { transform: translateX(-50%) scaleY(0.15); opacity: 0.2; }
      to   { opacity: 1; }
    }
    @keyframes bioNewBadgePop {
      0%   { opacity: 0;   transform: translateX(-50%) translateY(4px)  scale(0.6); }
      40%  { opacity: 1;   transform: translateX(-50%) translateY(-3px) scale(1.15); }
      65%  { opacity: 1;   transform: translateX(-50%) translateY(0)    scale(1); }
      88%  { opacity: 0.9; }
      100% { opacity: 0;   transform: translateX(-50%) translateY(-5px) scale(0.8); }
    }

    /* -- Bio Mobile Legend (collapsible) -- */
    .bio-mobile-legend {
      padding: 4px 8px 2px;
    }
    .bio-mobile-legend-toggle {
      background: none; border: none; color: rgba(255,255,255,0.45);
      font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; gap: 4px;
      padding: 2px 0; font-family: inherit;
    }
    .bio-mobile-legend-toggle:hover { color: rgba(255,255,255,0.65); }
    .bio-legend-chevron {
      transition: transform 0.2s ease;
    }
    .bio-mobile-legend-toggle[aria-expanded="true"] .bio-legend-chevron {
      transform: rotate(180deg);
    }
    .bio-mobile-legend-items {
      display: flex; flex-wrap: wrap; gap: 8px 14px;
      padding: 6px 0 4px;
    }
    .bio-ml-item {
      display: flex; align-items: center; gap: 4px;
      font-size: 0.65rem; color: rgba(255,255,255,0.4);
    }
    .bio-ml-line {
      display: inline-block; width: 16px; height: 0;
    }

    .bio-axis-header {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      min-height: 0;
      margin: 0;
      opacity: 0;
      pointer-events: none;
      transition: min-height 0.22s ease, margin 0.22s ease, opacity 0.18s ease;
    }
    .bio-axis-header.visible {
      min-height: 18px;
      margin: 0 0 4px;
      opacity: 1;
    }
    .bio-axis-header-label {
      padding: 4px 10px 4px 28px;
      color: rgba(238, 247, 255, 0.94);
      font-size: 10px;
      line-height: 1;
      font-weight: 600;
      letter-spacing: 0.02em;
      white-space: nowrap;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(7, 12, 24, 0.74), rgba(10, 18, 32, 0.42));
      box-shadow: 0 8px 20px rgba(0,0,0,0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .bio-axis-toggle {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 48px;
      background: linear-gradient(180deg, rgba(8, 14, 28, 0.94), rgba(12, 22, 40, 0.82));
      border: 1px solid rgba(34,211,238,0.24);
      border-left: none;
      border-radius: 0 8px 8px 0;
      color: rgba(221,246,255,0.9);
      font-size: 0;
      padding: 0;
      cursor: pointer;
      transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
      font-family: inherit;
      box-shadow: 0 0 0 1px rgba(34,211,238,0.08), 0 12px 24px rgba(0,0,0,0.28), 0 0 18px rgba(34,211,238,0.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .bio-axis-toggle:hover,
    .bio-axis-toggle:active {
      background: linear-gradient(180deg, rgba(12, 22, 40, 0.98), rgba(16, 28, 50, 0.88));
      border-color: rgba(34,211,238,0.4);
      color: rgba(240,252,255,0.98);
      box-shadow: 0 0 0 1px rgba(34,211,238,0.12), 0 14px 28px rgba(0,0,0,0.3), 0 0 22px rgba(34,211,238,0.22);
    }
    .bio-axis-toggle[aria-expanded="true"] {
      top: -20px;
      left: 0;
      transform: none;
      width: 22px;
      height: 22px;
      border: 1px solid rgba(34,211,238,0.26);
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(7, 12, 24, 0.92), rgba(11, 20, 34, 0.8));
      color: rgba(221,246,255,0.92);
      box-shadow: 0 8px 18px rgba(0,0,0,0.28), 0 0 14px rgba(34,211,238,0.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .bio-axis-toggle[aria-expanded="true"]:hover,
    .bio-axis-toggle[aria-expanded="true"]:active {
      background: linear-gradient(180deg, rgba(10, 18, 32, 0.98), rgba(14, 24, 42, 0.88));
      border-color: rgba(34,211,238,0.42);
      color: rgba(240,252,255,1);
    }
    .bio-axis-toggle .bio-axis-chevron {
      width: 12px;
      height: 12px;
      filter: drop-shadow(0 0 8px rgba(34,211,238,0.25));
      transition: transform 0.25s ease;
      transform: rotate(-90deg);
    }
    .bio-axis-toggle[aria-expanded="true"] .bio-axis-chevron {
      transform: rotate(180deg);
    }
    .bio-axis-overlay {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0;
      overflow: visible;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .bio-axis-overlay.visible {
      opacity: 1;
    }
    .bio-axis-label {
      position: absolute;
      left: 8px;
      display: inline-flex;
      align-items: center;
      color: rgba(244, 250, 255, 0.98);
      font-size: clamp(10px, 1vw, 11px);
      font-weight: 600;
      font-family: 'Inter', system-ui, sans-serif;
      transform: translateY(-50%);
      pointer-events: none;
      white-space: nowrap;
      letter-spacing: 0.01em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.62);
      z-index: 1;
    }
    .bio-axis-label::before {
      content: '';
      position: absolute;
      inset: -6px -9px;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(6, 10, 20, 0.72), rgba(10, 18, 32, 0.42));
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      z-index: -1;
    }
    .bio-axis-title {
      position: absolute;
      left: 6px;
      top: 4px;
      color: rgba(34, 211, 238, 0.8);
      font-size: 8px;
      font-weight: 600;
      font-family: 'Inter', system-ui, sans-serif;
      pointer-events: none;
      white-space: nowrap;
      text-shadow: 0 0 4px rgba(34, 211, 238, 0.3);
    }
    .bio-pace-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 22px;
      overflow: visible;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.24s ease;
    }
    .bio-pace-overlay.visible { opacity: 1; }
    .bio-pace-tick {
      position: absolute;
      top: 1px;
      width: 1px;
      transform: translateX(-50%);
      background: rgba(241, 245, 249, 0.2);
      box-shadow: none;
    }
    .bio-pace-tick.is-active {
      background: rgba(248, 250, 252, 0.76);
      box-shadow: 0 0 10px rgba(34, 211, 238, 0.16);
    }
    .bio-pace-label {
      position: absolute;
      top: 7px;
      display: block;
      min-width: 0;
      padding: 0;
      transform: translateX(-50%) rotate(-67deg);
      transform-origin: top center;
      color: rgba(255,255,255,0.44);
      font-size: clamp(6.75px, 0.82vw, 8px);
      font-weight: 600;
      letter-spacing: 0.04em;
      line-height: 1;
      white-space: nowrap;
      text-shadow: 0 1px 2px rgba(0,0,0,0.48);
      z-index: 1;
    }
    .bio-pace-label.is-active {
      color: rgba(255,255,255,0.9);
      text-shadow: 0 0 10px rgba(34, 211, 238, 0.18), 0 1px 2px rgba(0,0,0,0.55);
    }
    .bio-pace-label.is-muted {
      color: rgba(255,255,255,0.24);
    }

    /* -- Drift Inspector Section -- */
    .di-dropdown-wrap { position: relative; width: 100%; z-index: 1; }
    .di-dropdown-wrap.is-open { z-index: 2320; }
    .di-dropdown-stack-lift { z-index: 2319 !important; }
    .di-dropdown-trigger {
      width: 100%; padding: 10px 36px 10px 14px;
      border-radius: 10px; border: 1px solid rgba(34, 211, 238, 0.22);
      background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(16, 42, 67, 0.28) 48%, rgba(18, 28, 52, 0.30));
      color: #e2e8f0;
      font-size: 0.82rem; font-family: 'Inter', system-ui, sans-serif;
      cursor: pointer; text-align: left; display: flex; align-items: center;
      transition: border-color 0.2s, background 0.2s; position: relative;
    }
    .di-dropdown-trigger::after {
      content: ''; position: absolute; right: 12px; top: 50%;
      transform: translateY(-50%); width: 12px; height: 12px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(34,211,238,0.62)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: center;
      transition: transform 0.18s; pointer-events: none;
    }
    .di-dropdown-wrap.is-open .di-dropdown-trigger::after { transform: translateY(-50%) rotate(180deg); }
    .di-dropdown-trigger:hover, .di-dropdown-trigger:focus {
      border-color: rgba(34, 211, 238, 0.46);
      background: linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(20, 53, 91, 0.34) 48%, rgba(20, 30, 58, 0.38));
      outline: none;
    }
    .di-dropdown-label {
      flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .di-dropdown-menu {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: linear-gradient(165deg, rgba(10, 24, 48, 0.995), rgba(14, 24, 44, 0.995) 54%, rgba(12, 16, 34, 0.995));
      border: 1px solid rgba(34, 211, 238, 0.24);
      border-radius: 10px;
      max-height: 320px; overflow-x: hidden; overflow-y: auto; z-index: 2321;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      scrollbar-width: thin;
      scrollbar-color: rgba(34, 211, 238, 0.34) rgba(2, 6, 23, 0.28);
      box-shadow: 0 16px 40px rgba(0,0,0,0.66), 0 0 0 1px rgba(34, 211, 238, 0.08) inset;
    }
    .di-dropdown-item {
      display: flex; align-items: center; gap: 8px; padding: 9px 14px;
      cursor: pointer; font-size: 0.82rem; color: #e2e8f0;
      font-family: 'Inter', system-ui, sans-serif;
      border-bottom: 1px solid rgba(34, 211, 238, 0.08);
      transition: background 0.12s, border-color 0.12s;
    }
    .di-dropdown-item:last-child { border-bottom: none; }
    .di-dropdown-item:hover {
      background: linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(36, 55, 92, 0.18));
      border-bottom-color: rgba(34, 211, 238, 0.14);
    }
    .di-dropdown-item.is-selected {
      background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(40, 52, 88, 0.22));
      border-bottom-color: rgba(34, 211, 238, 0.18);
    }
    .di-dropdown-item-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .di-dropdown-conf-badge {
      flex-shrink: 0; font-size: 0.65rem; font-weight: 700;
      letter-spacing: 0.05em; padding: 2px 7px; border-radius: 5px; text-transform: uppercase;
    }
    .di-dropdown-conf-badge.high   { background: rgba(52,211,153,0.14); color: #34d399; border: 1px solid rgba(52,211,153,0.28); }
    .di-dropdown-conf-badge.medium { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.28); }
    .di-dropdown-conf-badge.low    { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.28); }
    /* Bottom fade on the dropdown scroll list */
    .di-dropdown-fade {
      position: sticky;
      bottom: 0;
      display: block;
      height: 36px;
      margin-top: -36px;
      background: linear-gradient(to top, rgba(12, 16, 34, 1) 0%, transparent 100%);
      pointer-events: none;
      border-radius: 0 0 10px 10px;
      flex-shrink: 0;
    }
    .drift-inspector-note {
      margin: 14px 0 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(34, 211, 238, 0.16);
      background: linear-gradient(140deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.08));
      color: rgba(255,255,255,0.68);
      font-size: 0.73rem;
      line-height: 1.45;
    }
    /* -- Drift Inspector one-row layout -- */
    .drift-inspector-summary {
      display: grid;
      grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr) minmax(300px, 1.05fr);
      gap: 14px;
      margin: 14px 0;
      align-items: stretch;
    }
    .di-hero-row,
    .di-confidence-section,
    .di-metadata-row {
      background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(34, 211, 238, 0.14);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      position: relative;
    }
    /* Left column: two signal cards stacked */
    .di-hero-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      padding: 10px;
    }
    .di-hero-card {
      padding: 12px 12px;
      border-radius: 12px;
      position: relative;
      min-width: 0;
      min-height: 126px;
      overflow: visible;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 3px;
    }
    @keyframes di-glow-pulse {
      0%,100% { opacity: 0.13; }
      50%      { opacity: 0.22; }
    }
    .di-hero-card--mech,
    .di-hero-card--hr {
      background: rgba(255,255,255,0.025);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 6px 18px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.04);
      overflow: visible;
    }
    .di-hero-card--mech::before,
    .di-hero-card--hr::before {
      display: none;
    }
    .di-hero-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(ellipse at 30% 40%, var(--glow-c, transparent) 0%, transparent 70%);
      animation: di-glow-pulse 3s ease-in-out infinite;
      pointer-events: none;
    }
    .di-hero-label {
      font-size: 0.56rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }
    .di-hero-card--mech .di-hero-label { color: rgba(255,255,255,0.55); }
    .di-hero-card--hr .di-hero-label { color: rgba(255,255,255,0.55); }
    .di-hero-icon {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      margin-right: 4px;
      opacity: 0.7;
    }
    .di-hero-sublabel {
      font-size: 0.52rem;
      color: rgba(255,255,255,0.28);
      margin-bottom: 4px;
    }
    .di-hero-value {
      font-size: 1.2rem;
      font-weight: 800;
      font-family: 'Roboto', system-ui, sans-serif;
      line-height: 1.1;
      text-align: center;
    }
    .di-hero-meta {
      margin-top: 3px;
      font-size: 0.58rem;
      color: rgba(255,255,255,0.36);
      line-height: 1.35;
      text-align: center;
    }
    .di-hero-meta .di-sub-note {
      display: block;
      margin-top: 1px;
      color: rgba(255,255,255,0.18);
    }
    /* Middle column: confidence */
    .di-confidence-section {
      display: flex;
      flex-direction: row;
      gap: 8px;
      padding: 8px 10px;
      height: 100%;
      box-sizing: border-box;
      align-items: center;
    }
    .di-conf-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 82px;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding-right: 7px;
      border-right: 1px solid rgba(34, 211, 238,0.12);
    }
    .di-conf-score-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      flex-wrap: wrap;
    }
    .di-confidence-label {
      font-size: 0.56rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.35);
    }
    .di-confidence-score {
      font-size: 0.82rem;
      font-weight: 700;
      font-family: 'Roboto', system-ui, sans-serif;
      color: rgba(255,255,255,0.5);
    }
    .di-confidence-of {
      font-size: 0.60rem;
      color: rgba(255,255,255,0.22);
    }
    .di-confidence-meta {
      font-size: 0.5rem;
      color: rgba(255,255,255,0.34);
      margin-top: 2px;
      text-align: center;
    }
    .di-confidence-meta--wind {
      max-width: 90px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: help;
    }
    /* Confidence rules: chip grid */
    .di-confidence-rules {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 5px;
      flex: 1;
      min-width: 0;
    }
    /* Metric chips */
    .di-rtag {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 6px;
      border-radius: 7px;
      min-width: 80px;
      min-height: 54px;
      flex: 1 1 calc(33% - 5px);
      cursor: help;
      position: relative;
      text-align: center;
      gap: 2px;
      overflow: visible;
    }
    .di-rtag--ok   { background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.18); }
    .di-rtag--warn { background: rgba(251,191,36,0.07);  border: 1px solid rgba(251,191,36,0.22); }
    .di-rtag--bad  { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.20); }
    .di-rtag--ceil { background: rgba(251,191,36,0.07);  border: 1px solid rgba(251,191,36,0.15); }
    .di-rtag--info { background: rgba(148,163,184,0.08); border: 1px solid rgba(148,163,184,0.18); }
    .di-rtag-name {
      font-size: clamp(0.45rem, 0.48vw, 0.56rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.35);
      line-height: 1.1;
    }
    .di-rtag--warn .di-rtag-name { color: #fde68a; }
    .di-rtag--bad  .di-rtag-name { color: #fca5a5; }
    .di-rtag--ok   .di-rtag-name { color: #6ee7b7; }
    .di-rtag--ceil .di-rtag-name { color: #fde68a; }
    .di-rtag--info .di-rtag-name { color: #94a3b8; }
    .di-rtag-val {
      font-size: clamp(0.62rem, 0.78vw, 0.8rem);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: rgba(255,255,255,0.85);
      line-height: 1.05;
      word-break: break-word;
    }
    .di-rtag--warn .di-rtag-val { color: rgba(255,255,255,0.9); }
    .di-rtag-sub {
      font-size: clamp(0.45rem, 0.5vw, 0.56rem);
      color: rgba(255,255,255,0.28);
      line-height: 1.05;
    }
    .di-rtag--warn .di-rtag-sub { color: rgba(251,191,36,0.55); }
    .di-rtag--bad .di-rtag-sub { color: rgba(248,113,113,0.55); }
    .di-rtag-pen      { font-size: clamp(0.55rem, 0.58vw, 0.64rem); font-weight: 700; color: #f87171; line-height: 1.05; }
    .di-rtag-pen-warn { font-size: clamp(0.55rem, 0.58vw, 0.64rem); font-weight: 700; color: #fbbf24; line-height: 1.05; }
    .di-rtag-ok   { font-size: clamp(0.55rem, 0.58vw, 0.64rem); font-weight: 700; color: #34d399; line-height: 1.05; }
    .di-rtag-ceil { font-size: clamp(0.55rem, 0.58vw, 0.64rem); line-height: 1.05; }
    .di-rtag-info { font-size: clamp(0.45rem, 0.5vw, 0.54rem); font-weight: 600; color: #94a3b8; line-height: 1.05; }
    /* data-tip CSS tooltip */
    [data-tip] { position: relative; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 7px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(5,10,20,0.97);
      border: 1px solid rgba(34, 211, 238,0.28);
      border-radius: 8px;
      padding: 8px 11px;
      min-width: 220px;
      max-width: min(340px, 86vw);
      font-size: 0.58rem;
      color: rgba(255,255,255,0.78);
      line-height: 1.5;
      z-index: 9999;
      white-space: pre-line;
      text-align: left;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease;
      box-shadow: 0 10px 28px rgba(0,0,0,0.6);
      font-weight: 400;
      text-transform: none;
      letter-spacing: normal;
    }
    [data-basic][data-tip]::after {
      content: attr(data-tip);
    }
    [data-tip]:hover::after,
    [data-tip].di-touch-tip-active::after { opacity: 1; }
    .di-confidence-rules [data-tip],
    .di-metadata-row [data-tip] {
      position: relative;
    }
    .di-confidence-rules [data-tip]:hover,
    .di-confidence-rules [data-tip]:focus-visible,
    .di-confidence-rules [data-tip].di-touch-tip-active,
    .di-metadata-row [data-tip]:hover,
    .di-metadata-row [data-tip]:focus-visible,
    .di-metadata-row [data-tip].di-touch-tip-active {
      z-index: 40;
    }
    #driftInspectorSection [data-tip]::after,
    #driftInspectorSection [data-tip].di-touch-tip-active::after {
      display: none !important;
    }
    /* Right column: metadata */
    .di-metadata-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      padding: 10px;
      width: 100%;
      min-height: 112px;
      box-sizing: border-box;
      overflow: visible;
    }
    .di-meta-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.02);
      min-height: 46px;
    }
    .di-meta-item--run {
      grid-column: 1 / -1;
    }
    .di-meta-item--context-right {
      grid-column: 2;
    }
    .di-meta-label {
      font-size: 0.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: rgba(255,255,255,0.6);
      white-space: nowrap;
      order: 2;
    }
    .di-meta-label--gct {
      line-height: 1.1;
      max-width: 100%;
      text-align: center;
      white-space: normal;
    }
    .di-meta-label--context {
      text-transform: none;
      letter-spacing: 0.02em;
    }
    .di-meta-value {
      font-size: 0.76rem;
      font-weight: 600;
      color: #ffffff;
      font-variant-numeric: tabular-nums;
      text-align: center;
      line-height: 1.15;
      order: 1;
    }
    .di-meta-sub {
      display: block;
      margin-top: 2px;
      font-size: 0.56rem;
      font-weight: 500;
      line-height: 1.1;
      color: rgba(255,255,255,0.62);
      letter-spacing: 0.01em;
    }
    .di-visual-metric-shell {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      max-width: 100%;
      min-width: 0;
      cursor: pointer;
    }
    .di-visual-metric-shell::after {
      content: '';
      position: static;
      flex: 0 0 4px;
      width: 4px;
      height: 4px;
      border-right: 1.4px solid rgba(34,211,238,0.62);
      border-bottom: 1.4px solid rgba(34,211,238,0.62);
      transform: translateY(-1px) rotate(45deg);
      pointer-events: none;
    }
    .di-visual-metric-text {
      color: rgba(255,255,255,0.68);
      font: inherit;
      font-size: 0.44rem !important;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
      line-height: 1.2;
      white-space: nowrap;
      pointer-events: none;
    }
    .di-visual-metric-select {
      position: absolute;
      inset: -6px -12px -6px -6px;
      width: calc(100% + 18px);
      height: calc(100% + 12px);
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      border-radius: 0;
      background: transparent;
      background-image: none !important;
      color: transparent;
      opacity: 0;
      padding: 0;
      cursor: pointer;
    }
    .di-hero-label .di-visual-metric-shell { margin-left: 2px; }
    .di-visual-metric-select:focus {
      outline: none;
    }
    .di-visual-metric-shell:focus-within {
      outline: 1px solid rgba(34,211,238,0.45);
      outline-offset: 2px;
      border-radius: 3px;
    }
    .di-visual-metric-select option {
      background: #020617;
      color: #e2e8f0;
    }
    .di-hero-card--visual-selected .di-hero-meta {
      color: rgba(255,255,255,0.50);
    }
    .di-hero-metric-range {
      display: block;
      color: rgba(255,255,255,0.46);
    }
    .di-visual-metric-delta {
      color: rgba(255,255,255,0.42);
    }
    @media (max-width: 1120px) {
      .drift-inspector-summary { grid-template-columns: 1fr; }
      .di-confidence-section { flex-direction: column; gap: 10px; }
      .di-conf-left {
        border-right: none;
        border-bottom: 1px solid rgba(34, 211, 238,0.12);
        padding-right: 0;
        padding-bottom: 9px;
      }
    }
    @media (max-width: 768px) {
      .di-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .di-rtag { flex: 1 1 calc(50% - 5px); min-width: 72px; }
    }
    .drift-inspector-stat {
      padding: 12px 14px;
      border-radius: 12px;
      background: linear-gradient(140deg, rgba(34, 211, 238, 0.12), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01));
      border: 1px solid rgba(34, 211, 238, 0.16);
      box-shadow: 0 8px 22px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .drift-inspector-stat--primary {
      background: linear-gradient(145deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.16) 55%, rgba(255,255,255,0.04));
      border-color: rgba(34, 211, 238, 0.28);
      box-shadow: 0 10px 26px rgba(0,0,0,0.18), 0 0 0 1px rgba(34,211,238,0.08), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .drift-inspector-stat--primary .di-label {
      color: rgba(255,255,255,0.56);
    }
    .drift-inspector-stat--primary .di-value {
      font-size: 1.3rem;
    }
    .drift-inspector-stat .di-label {
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.4);
      margin-bottom: 4px;
    }
    .drift-inspector-stat .di-value {
      font-size: 1.1rem;
      font-weight: 700;
      color: #e2e8f0;
    }
    .drift-inspector-stat .di-sub {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.35);
      margin-top: 2px;
    }
    .drift-inspector-stat .di-sub-note {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,0.28);
    }
    .di-confidence-badge {
      display: inline-block;
      font-size: 0.58rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 7px;
      border-radius: 5px;
      line-height: 1.15;
    }
    .di-confidence-badge.high { color: #34d399; background: rgba(52,211,153,0.12); }
    .di-confidence-badge.warn { color: #fb923c; background: rgba(251,146,60,0.12); }
    .di-confidence-badge.medium { color: #fbbf24; background: rgba(251,191,36,0.12); }
    .di-confidence-badge.low { color: #f87171; background: rgba(248,113,113,0.12); }
    .di-conf-wrap { position: relative; display: inline-block; cursor: default; }
    .di-conf-tooltip {
      display: none;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,16,24,0.96);
      border: 1px solid rgba(34,211,238,0.25);
      border-radius: 8px;
      padding: 10px 14px;
      min-width: 220px;
      max-width: 320px;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      pointer-events: none;
    }
    .di-conf-wrap:hover .di-conf-tooltip { display: block; }
    .di-conf-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(34,211,238,0.25);
    }
    .di-conf-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2px 0;
      font-size: 0.58rem;
      color: rgba(255,255,255,0.7);
    }
    .di-conf-row + .di-conf-row { border-top: 1px solid rgba(255,255,255,0.04); }
    .di-conf-penalty { color: #f87171; font-weight: 600; font-variant-numeric: tabular-nums; }
    .di-conf-ok { color: #34d399; }
    .di-conf-ceiling { border-top: 1px solid rgba(255,255,255,0.1) !important; margin-top: 2px; opacity: 0.7; font-style: italic; }
    .di-conf-cap { font-size: 0.75rem; }
    .di-conf-total {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid rgba(255,255,255,0.1);
      font-weight: 700;
      font-size: 0.62rem;
      color: rgba(255,255,255,0.9);
      display: flex;
      justify-content: space-between;
    }
    .drift-inspector-charts {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .drift-inspector-charts .drift-chart-card {
      margin-top: 0;
    }
    .drift-inspector-charts .drift-chart-container {
      height: 240px;
    }
    /* Elevation + GPS map side-by-side row */
    .di-elev-gps-row {
      display: grid;
      grid-template-columns: 1fr minmax(260px, 0.52fr);
      gap: 16px;
      align-items: stretch;
    }
    .di-gps-map-card {
      background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03) 42%, rgba(255,255,255,0.02) 100%);
      border: 1px solid rgba(34, 211, 238, 0.14);
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05);
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 208px;
    }
    .di-gps-map-card h5 {
      font-size: 0.78rem !important;
      color: rgba(255,255,255,0.72);
      margin: 0;
      font-weight: 600;
      position: absolute;
      top: 12px;
      left: 14px;
      right: 14px;
      z-index: 520;
      text-shadow: 0 1px 10px rgba(2, 6, 23, 0.9);
    }
    .di-gps-zoom-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 530;
      display: inline-flex;
      gap: 6px;
    }
    .di-gps-zoom-btn {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(34, 211, 238,0.28);
      background: linear-gradient(140deg, rgba(8,145,178,0.34), rgba(2,6,23,0.74));
      color: #a5f3fc;
      font-size: 1rem;
      font-weight: 800;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.10);
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
    }
    .di-gps-zoom-btn:hover:not(:disabled) {
      background: linear-gradient(140deg, rgba(14,165,197,0.34), rgba(8,51,68,0.40));
      border-color: rgba(46, 209, 244,0.44);
      color: #ffffff;
      transform: translateY(-1px);
    }
    .di-gps-zoom-btn:disabled {
      opacity: 0.35;
      cursor: default;
      transform: none;
    }
    .di-gps-leaflet-wrap {
      position: absolute;
      inset: 0;
      min-height: 100%;
      border-radius: 14px;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03) 42%, rgba(255,255,255,0.02) 100%),
        linear-gradient(180deg, #081126 0%, #0a1328 54%, #060b1e 100%);
      box-shadow: inset 0 0 24px rgba(0,0,0,0.24);
      -webkit-mask-image: radial-gradient(135% 118% at 50% 50%, #000 58%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.46) 94%, transparent 100%);
      mask-image: radial-gradient(135% 118% at 50% 50%, #000 58%, rgba(0,0,0,0.98) 72%, rgba(0,0,0,0.82) 84%, rgba(0,0,0,0.46) 94%, transparent 100%);
    }
    .di-gps-leaflet-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03) 42%, rgba(255,255,255,0.02) 100%),
        linear-gradient(180deg, #0b142d 0%, #0d152e 48%, #080d22 100%);
      mix-blend-mode: normal;
      opacity: 1;
    }
    .di-gps-leaflet-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(135deg, rgba(148,163,184,0.08), rgba(51,65,85,0.07) 44%, rgba(255,255,255,0.03) 100%),
        radial-gradient(118% 108% at 50% 50%, rgba(148,163,184,0.05) 0%, rgba(34,211,238,0.04) 62%, rgba(6,10,28,0.05) 100%);
      mix-blend-mode: screen;
      opacity: 0;
    }
    .di-gps-leaflet-wrap .leaflet-container,
    .di-gps-leaflet-wrap .leaflet-pane,
    .di-gps-leaflet-wrap .leaflet-map-pane {
      background: transparent !important;
      border-radius: 8px;
    }
    @media (pointer: coarse), (max-width: 640px) {
      .di-gps-leaflet-wrap,
      .di-gps-leaflet-wrap .leaflet-container,
      .bucket-route-map,
      .bucket-route-map .leaflet-container {
        touch-action: pan-y !important;
      }
    }
    .di-gps-leaflet-wrap .leaflet-tile-pane {
      opacity: 0.42 !important;
      mix-blend-mode: normal !important;
      filter: grayscale(1) sepia(0.18) hue-rotate(165deg) saturate(0.85) brightness(2.15) contrast(1.18) drop-shadow(0 0 1.2px rgba(148,163,184,0.2)) !important;
    }
    .di-gps-leaflet-wrap .leaflet-overlay-pane { z-index: 500 !important; }
    .di-gps-leaflet-wrap .leaflet-marker-pane { z-index: 505 !important; }
    .di-gps-leaflet-wrap .leaflet-tooltip-pane { z-index: 510 !important; }
    .di-gps-leaflet-wrap .leaflet-popup-pane { z-index: 515 !important; }
    .di-gps-leaflet-wrap .leaflet-overlay-pane path {
      filter: none;
    }
    .di-gps-leaflet-wrap .di-gps-base-halo {
      stroke: #001f2e !important;
      stroke-width: 8px !important;
      stroke-opacity: 0.82 !important;
    }
    .di-gps-leaflet-wrap .di-gps-base-route {
      stroke: #38bdf8 !important;
      stroke-width: 4px !important;
      stroke-opacity: 0.92 !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-halo {
      stroke-width: 12px !important;
      stroke-opacity: 0 !important;
      filter: none !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-fresh {
      stroke: #21ff92 !important;
      stroke-width: 7px !important;
      stroke-opacity: 1 !important;
      filter: none !important;
    }
    .di-gps-leaflet-wrap .di-gps-window-fatigue {
      stroke: #ff7a1a !important;
      stroke-width: 7px !important;
      stroke-opacity: 1 !important;
      filter: none !important;
    }
    .di-gps-legend {
      display: flex;
      justify-content: center;
      gap: 14px;
      margin-top: 0;
      font-size: 0.62rem;
      color: rgba(255,255,255,0.48);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10px;
      z-index: 520;
      text-shadow: 0 1px 10px rgba(2, 6, 23, 0.9);
    }
    .di-gps-legend span::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 3px;
      border-radius: 2px;
      margin-right: 4px;
      vertical-align: middle;
    }
    .di-gps-legend .gps-leg-fresh::before { background: #21ff92; }
    .di-gps-legend .gps-leg-fatigue::before { background: #ff7a1a; }
    .di-gps-legend .gps-leg-route::before { background: #38bdf8; }
    @media (max-width: 640px) {
      #driftInspectorSection { margin-top: 1.5rem; }
      .drift-inspector-charts .drift-chart-container { height: 180px; }
      .drift-inspector-summary {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 8px 0 14px;
      }
      .di-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
      .di-hero-card { min-height: 90px; padding: 8px 6px; }
      .di-hero-value { font-size: 1rem; }
      .di-confidence-section { padding: 7px; gap: 6px; }
      .di-conf-left { min-width: 0; width: 100%; padding-bottom: 4px; }
      .di-confidence-rules {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        width: 100%;
      }
      .di-rtag {
        min-width: 0;
        min-height: 46px;
        padding: 4px 3px;
        width: 100%;
        flex: none;
      }
      .di-rtag-name { font-size: 0.38rem; }
      .di-rtag-val { font-size: 0.62rem; }
      .di-rtag-sub,
      .di-rtag-pen,
      .di-rtag-pen-warn,
      .di-rtag-ok,
      .di-rtag-ceil,
      .di-rtag-info { font-size: 0.44rem; }
      .di-metadata-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; min-height: 0; }
      .di-meta-item { padding: 6px 8px; min-height: 48px; min-width: 0; }
      .di-meta-item--run { grid-column: 1 / -1; }
      .di-meta-item--context-right { grid-column: auto; }
      .di-meta-label { white-space: normal; text-align: center; }
      .di-meta-value {
        font-size: 0.7rem;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }
      #driftInspectorChartsWrap {
        margin-top: 4px;
        min-width: 0;
      }
      #driftInspectorChartsWrap,
      #driftInspectorChartsWrap .drift-chart-card,
      #driftInspectorChartsWrap .drift-chart-toolbar,
      #driftInspectorChartsWrap .drift-chart-actions {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }
      #driftInspectorSection [data-tip] {
        cursor: default;
      }
      #driftInspectorSection [data-tip]::after {
        display: none !important;
      }
      #driftInspectorSection [data-tip].di-touch-tip-active::after {
        display: none !important;
        position: fixed;
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(290px, calc(100vw - 42px));
        min-width: 0;
        max-width: calc(100vw - 42px);
        opacity: 1;
        z-index: 2147483647;
      }
      .di-elev-gps-row { grid-template-columns: 1fr; }
      /* Drift summary collapsible on mobile */
      .di-summary-collapsible {
        width: 100%;
        min-width: 0;
      }
      .di-summary-collapsible.di-summary-expanded {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .di-summary-collapsible { display: none; }
      .di-summary-collapsible.di-summary-expanded { display: block; }
      .di-summary-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        padding: 6px 0;
        margin-top: 4px;
        background: none;
        border: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        color: rgba(255,255,255,0.5);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: color 0.18s ease;
      }
      .di-summary-toggle:hover { color: rgba(255,255,255,0.7); }
      .di-summary-toggle svg { transition: transform 0.25s ease; }
      .di-summary-toggle.di-summary-expanded svg { transform: rotate(90deg); }
    }
    @media (min-width: 641px) {
      .di-summary-toggle { display: none; }
      .di-summary-collapsible { display: contents !important; }
    }

    /* Cards container */
    .bucket-cards-row { display: flex; gap: 12px; }
    /* Mobile: stack cards vertically */
    @media (max-width: 640px) {
      .bucket-cards-row { flex-direction: column; gap: 10px; }
      .bucket-card { padding: 1rem; }
      .bucket-route-map {
        height: 150px;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: -1rem;
      }
      .bucket-card .bucket-label { font-size: 0.95rem; }
      .bucket-card .bucket-price { font-size: 0.8rem; margin-bottom: 12px; }
      .bucket-card .bucket-stat { font-size: 0.75rem; }
      .bucket-rep-run .rep-row { font-size: 0.7rem; min-height: 14px; }
    }

    @keyframes procEnterFade {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* The Run Analysis results (summary + Activity Log, which scrolls past 280px) are this
       tall with a typical run history and no new runs since the last visit. The pre-load
       placeholder and the loading spinner reserve it while the intro keeps its line, so the
       card does not change height when the results replace them. Narrow phones wrap the
       "No new runs" chip. A browser that last saw no Stryd data here
       (html[data-ra-no-results], set in stryd-profile.html) reserves the upload card
       instead, and keeps the intro hidden as the upload state does. */
    #strydRunAnalysisSection { --ra-results-min-h: 459px; }
    @media (max-width: 640px) {
      #strydRunAnalysisSection { --ra-results-min-h: 385px; }
    }
    @media (max-width: 369px) {
      #strydRunAnalysisSection { --ra-results-min-h: 402px; }
    }
    @media (max-width: 329px) {
      #strydRunAnalysisSection { --ra-results-min-h: 414px; }
    }
    html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 251px; }
    @media (max-width: 899px) {
      html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 249px; }
    }
    @media (max-width: 640px) {
      /* The spinner is 200px tall here; the upload card that follows is 194px. */
      html[data-ra-no-results] #strydRunAnalysisSection { --ra-results-min-h: 200px; }
    }
    html[data-ra-no-results] #strydRunAnalysisSection .frp-section-intro:not(.ra-intro-shown) {
      display: none;
    }
    /* Static pre-load placeholder - always in the layout, gives the section reserved height
       before JS runs. Hidden as soon as showBucketState() fires. */
    .proc-preload-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      min-height: var(--ra-results-min-h, 220px);
      padding: 32px 0;
    }
    .proc-preload-placeholder-dot {
      width: 52px; height: 52px;
      border-radius: 50%;
      background: rgba(34, 211, 238, 0.07);
      border: 1px solid rgba(34, 211, 238, 0.14);
      animation: procPrePulse 2.2s ease-in-out infinite;
    }
    .proc-preload-placeholder-text {
      font-size: 12.5px;
      color: rgba(255,255,255,0.25);
      font-weight: 500;
      letter-spacing: 0.04em;
      animation: procPrePulse 2.2s 0.4s ease-in-out infinite;
    }
    @keyframes procPrePulse {
      0%, 100% { opacity: 0.5; }
      50%       { opacity: 1;   }
    }
    #bucketStatsLoading { padding: 32px 0; display: none; flex-direction: column; align-items: center; min-height: var(--ra-results-min-h, 220px); justify-content: center; }
    /* Fading out while the results fade in: out of the flow, over the results. */
    #bucketStatsLoading.proc-overlay { position: absolute; right: 0; left: 0; z-index: 2; pointer-events: none; }
    /* Container fades in as one unit - no per-child stagger (avoids position glitches) */
    #bucketStatsLoading.proc-entering {
      animation: procEnterFade 0.45s ease both;
    }

    /* -- Phase system: init → analysing → done -- */
    /* Init phase: just spinner + text, no progress/feed */
    #bucketStatsLoading.proc-phase-init .proc-progress-track,
    #bucketStatsLoading.proc-phase-init .proc-feed,
    #bucketStatsLoading.proc-phase-init .proc-counter { display: none !important; }
    #bucketStatsLoading.proc-phase-init .proc-spinner { width: 28px; height: 28px; border-width: 3px; }
    /* Analysing phase: full animation visible */
    #bucketStatsLoading.proc-phase-analysing .proc-progress-track,
    #bucketStatsLoading.proc-phase-analysing .proc-feed,
    #bucketStatsLoading.proc-phase-analysing .proc-counter { display: inherit; }
    #bucketStatsLoading.proc-phase-analysing .proc-spinner { width: 36px; height: 36px; border-width: 3px; }
    #bucketStatsLoading.proc-phase-finalising {
      min-height: var(--ra-results-min-h, 220px);
      padding: 20px 0 12px;
    }
    #bucketStatsLoading.proc-phase-finalising .proc-feed,
    #bucketStatsLoading.proc-phase-finalising .proc-patience-note {
      display: none !important;
    }

    /* -- Centered spinner -- */
    .proc-spinner-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 18px; position: relative; z-index: 20; overflow: visible; }
    .proc-spinner { border: 3px solid rgba(34, 211, 238,.15); border-top-color: #22d3ee; border-radius: 50%; animation: proc-spin 1s linear infinite; filter: drop-shadow(0 0 6px rgba(34, 211, 238,.35)); transition: width .4s ease, height .4s ease; }
    @keyframes proc-spin { to { transform: rotate(360deg); } }
    .proc-title { display: inline-block; min-height: 1.35em; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0; line-height: 1.35; max-width: min(92vw, 420px); text-align: center; transition: opacity .35s ease; contain: paint; -webkit-font-smoothing: antialiased; }
    .proc-title.text-fading { opacity: 0; }
    .proc-patience-note {
      color: rgba(186, 230, 253, 0.72);
      font-size: 12px;
      line-height: 1.35;
      text-align: center;
      max-width: 280px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transform: translateY(-4px);
      transition: opacity .38s ease, transform .38s ease, max-height .38s ease, margin .38s ease;
      margin: -8px auto 0;
    }
    .proc-patience-note.visible {
      max-height: 42px;
      opacity: 1;
      overflow: visible;
      transform: translateY(0);
      margin: -3px auto 2px;
      z-index: 300;
    }
    .proc-patience-note .section-tooltip-trigger {
      position: relative;
      flex: 0 0 auto;
      z-index: 350;
    }
    .proc-patience-note .section-tooltip-btn {
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      transform-origin: center;
    }
    .proc-patience-note .section-tooltip-btn svg {
      width: 15px !important;
      height: 15px !important;
      min-width: 15px !important;
      min-height: 15px !important;
      flex-basis: 15px !important;
    }
    .proc-patience-note .section-tooltip {
      left: 50%;
      min-width: min(420px, calc(100vw - 40px)) !important;
      max-width: min(460px, calc(100vw - 40px)) !important;
      padding: 16px 18px !important;
      transform: translate(-50%, 10px);
      z-index: 2147483647 !important;
    }
    .proc-patience-note .section-tooltip p {
      margin: 0;
      line-height: 1.55;
    }
    .proc-patience-note .section-tooltip::after {
      left: calc(50% - 6px);
    }
    @media (min-width: 640px) {
      .proc-patience-note .section-tooltip-trigger:hover .section-tooltip,
      .proc-patience-note .section-tooltip-trigger.tooltip-active .section-tooltip,
      .proc-patience-note .section-tooltip.tooltip-open {
        transform: translate(-50%, 0);
      }
    }
    #bucketStatsLoading.proc-phase-init .proc-patience-note { display: none; }
    .proc-counter { color: rgba(255,255,255,.5); font-size: 13px; margin-bottom: 4px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
    .proc-counter-main { display: inline-flex; align-items: center; transition: transform .32s ease; }
    .proc-counter.has-valid .proc-counter-main { transform: translateX(-7px); }
    .proc-counter .proc-num { color: #22d3ee; font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 4px; display: inline-block; }
    .proc-valid-inline {
      display: inline-flex;
      align-items: center;
      color: rgba(255,255,255,.5);
      font-size: 13px;
      opacity: 0;
      margin-left: 0;
      max-width: 0;
      overflow: hidden;
      transform: translateX(-4px);
      transition: opacity .32s ease, max-width .32s ease, margin-left .32s ease, transform .32s ease;
    }
    .proc-valid-inline.visible {
      opacity: 1;
      max-width: 170px;
      margin-left: 10px;
      transform: translateX(0);
    }
    .proc-valid-inline .proc-valid-num { color: #34d399; font-weight: 600; margin-right: 4px; }

    /* -- Cyan glow progress bar -- */
    .proc-progress-track { width: 100%; max-width: 300px; height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); margin-bottom: 22px; overflow: visible; position: relative; }
    .proc-progress-fill { height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, #1bb8d8, #22d3ee, #56e0fb); transition: width .4s cubic-bezier(.4,0,.2,1), background .45s ease, box-shadow .45s ease; position: relative; box-shadow: 0 0 10px rgba(34, 211, 238,.6), 0 0 25px rgba(34, 211, 238,.35), 0 0 50px rgba(34, 211, 238,.15); }
    .proc-progress-fill::after { content: ''; position: absolute; right: -3px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238,.9), 0 0 28px rgba(34, 211, 238,.5), 0 0 48px rgba(34, 211, 238,.2); }
    .proc-progress-fill.proc-progress-complete { background: linear-gradient(90deg, #22d3ee 0%, #2dd4bf 42%, #22c55e 100%); box-shadow: 0 0 10px rgba(34, 197, 94,.58), 0 0 25px rgba(34, 197, 94,.34), 0 0 50px rgba(34, 197, 94,.16); }
    .proc-progress-fill.proc-progress-complete::after { background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94,.88), 0 0 28px rgba(34, 197, 94,.48), 0 0 48px rgba(34, 197, 94,.2); }

    /* -- Run feed -- */
    .proc-feed { position: relative; width: 100%; max-width: 340px; height: 110px; overflow: visible; margin: 0 auto; }
    .proc-feed-inner { display: flex; flex-direction: column; gap: 5px; height: 100%; width: 100%; align-items: stretch; overflow: visible; }

    /* Mobile-only compact processing layout */
    @media (max-width: 640px) {
      #bucketStatsLoading { padding: 20px 0 14px; }
      .proc-spinner-wrap { gap: 10px; margin-bottom: 10px; }
      .proc-progress-track { max-width: 240px; margin-bottom: 12px; }
      .proc-patience-note {
        max-width: 232px;
        font-size: 10.5px;
        line-height: 1.3;
      }
      .proc-counter {
        max-width: 240px;
        width: 100%;
        margin: 0 auto 4px;
        font-size: 11px;
      }
      .proc-counter-main { font-size: 11px; }
      .proc-counter .proc-num {
        font-size: 13px;
        line-height: 1;
      }
      .proc-valid-inline { font-size: 11px; }
      .proc-valid-inline .proc-valid-num {
        font-size: 13px;
        line-height: 1;
      }
      .proc-feed { max-width: 272px; height: 92px; }
      .proc-feed-inner { gap: 4px; }
      .proc-run { min-height: 24px; padding: 4px 8px; gap: 6px; }
      .proc-run-details { font-size: 9px; }
      .proc-run-detail-date { font-size: 9px; }
      .proc-pill { font-size: 9px; padding: 2px 6px; }
    }

    /* -- Individual run row - compact queue item -- */
    .proc-run { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(0,16,24,.6); border: 1px solid rgba(255,255,255,.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: proc-enter .5s cubic-bezier(.25,.1,.25,1) forwards; min-height: 28px; flex-shrink: 0; width: 100%; box-sizing: border-box; }
    @keyframes proc-enter { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

    /* Top run highlight - the one currently being "processed" */
    .proc-run.proc-active { border-color: rgba(255,255,255,.08); }

    /* Type-specific glow on classification */
    .proc-run.proc-glow-daily  { box-shadow: 0 0 14px rgba(59,130,246,.3), inset 0 0 8px rgba(59,130,246,.06); border-color: rgba(59,130,246,.25); transition: box-shadow .5s ease, border-color .5s ease; }
    .proc-run.proc-glow-tempo  { box-shadow: 0 0 14px rgba(249,115,22,.3), inset 0 0 8px rgba(249,115,22,.06); border-color: rgba(249,115,22,.25); transition: box-shadow .5s ease, border-color .5s ease; }
    .proc-run.proc-glow-race   { box-shadow: 0 0 14px rgba(239,68,68,.3), inset 0 0 8px rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); transition: box-shadow .5s ease, border-color .5s ease; }
    .proc-run.proc-glow-long_run { box-shadow: 0 0 14px rgba(34, 211, 238,.3), inset 0 0 8px rgba(34, 211, 238,.06); border-color: rgba(34, 211, 238,.25); transition: box-shadow .5s ease, border-color .5s ease; }
    .proc-run.proc-glow-interval { box-shadow: 0 0 14px rgba(234,179,8,.3), inset 0 0 8px rgba(234,179,8,.06); border-color: rgba(234,179,8,.25); transition: box-shadow .5s ease, border-color .5s ease; }

    /* Exit animations */
    .proc-run.proc-exit-left { animation: proc-slide-left .35s ease forwards !important; }
    .proc-run.proc-exit-right { animation: proc-slide-right .35s ease forwards !important; }
    @keyframes proc-slide-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-60px); } }
    @keyframes proc-slide-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }

    /* Discarded styling - only applied when classified */
    .proc-run.proc-classified-discard { filter: opacity(.45); }
    .proc-run.proc-classified-discard .proc-run-details { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.18); }

    .proc-run-details { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .22s ease, transform .22s ease; }
    .proc-run-details.proc-details-fade-out { opacity: 0; transform: translateY(-3px); }
    .proc-run-details.proc-details-fade-in { animation: proc-details-fade-in .32s ease forwards; }
    @keyframes proc-details-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    .proc-run-detail { display: inline-flex; align-items: center; min-width: 0; }
    .proc-run-detail-date { color: rgba(255,255,255,.58); font-size: 11px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

    /* -- Classification pill -- */
    .proc-pill { flex-shrink: 0; padding: 2px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: capitalize; transition: all .3s ease; }
    .proc-pill-daily   { background: rgba(59,130,246,.14); color: #3b82f6; border: 1px solid rgba(59,130,246,.18); }
    .proc-pill-tempo    { background: rgba(249,115,22,.14); color: #f97316; border: 1px solid rgba(249,115,22,.18); }
    .proc-pill-race     { background: rgba(239,68,68,.14); color: #ef4444; border: 1px solid rgba(239,68,68,.18); }
    .proc-pill-long_run { background: rgba(34, 211, 238,.14); color: #06b6d4; border: 1px solid rgba(34, 211, 238,.18); }
    .proc-pill-interval { background: rgba(234,179,8,.14); color: #eab308; border: 1px solid rgba(234,179,8,.18); }
    .proc-pill-discard  { background: rgba(255,255,255,.06); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.06); }
    .proc-pill-pending  { background: rgba(255,255,255,.04); color: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.04); display: inline-flex; align-items: flex-end; justify-content: center; gap: 4px; min-width: 36px; padding: 3px 10px; }
    .proc-pill-pending .proc-pending-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .22; }
    .proc-feed-inner > .proc-run:first-child .proc-pill-pending .proc-pending-dot,
    .proc-run.proc-active .proc-pill-pending .proc-pending-dot { opacity: .35; animation: proc-pending-bounce 1.05s ease-in-out infinite; }
    .proc-feed-inner > .proc-run:first-child .proc-pill-pending .proc-pending-dot:nth-child(2),
    .proc-run.proc-active .proc-pill-pending .proc-pending-dot:nth-child(2) { animation-delay: .14s; }
    .proc-feed-inner > .proc-run:first-child .proc-pill-pending .proc-pending-dot:nth-child(3),
    .proc-run.proc-active .proc-pill-pending .proc-pending-dot:nth-child(3) { animation-delay: .28s; }
    @keyframes proc-pending-bounce {
      0%, 60%, 100% { transform: translateY(0); opacity: .35; }
      30% { transform: translateY(-3px); opacity: 1; }
    }

    #bucketStatsLoading.proc-finishing { transition: opacity .45s ease, transform .45s ease; }
    #bucketStatsLoading.proc-finishing.proc-fade-out { opacity: 0; transform: translateY(-8px); }
    .gp-inline-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1em;
      height: 1em;
      flex: 0 0 auto;
      color: currentColor;
      vertical-align: -0.13em;
    }
    .gp-inline-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }
    .gp-inline-icon--status {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
    .gp-inline-icon--button,
    .gp-inline-icon--button-state {
      width: 14px;
      height: 14px;
    }
    .gp-inline-icon--option {
      width: 13px;
      height: 13px;
      margin-right: 6px;
      vertical-align: -0.1em;
    }
    #bucketStatsError { text-align: center; padding: 24px 0; color: rgba(255,255,255,0.6); max-width: 520px; margin: 0 auto; }
    .gp-state-icon {
      width: 104px;
      height: 104px;
      margin: 0 auto 16px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .gp-state-icon img,
    .gp-state-icon svg {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      overflow: visible;
      filter:
        drop-shadow(0 0 14px rgba(34, 211, 238, 0.18))
        drop-shadow(0 0 22px rgba(139, 92, 246, 0.12));
    }
    #bucketRetryBtn { display: none; margin: 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 8px 20px; border-radius: 8px; background: rgba(34, 211, 238, 0.15); border: 1px solid rgba(34, 211, 238, 0.3); color: #22d3ee; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
    #bucketRetryBtn:hover { background: rgba(34, 211, 238, 0.22); border-color: rgba(34, 211, 238, 0.5); }
    .bucket-new-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; background: rgba(34, 211, 238, 0.15); color: #22d3ee; margin-left: 8px; }

    /* Consolidated Stats Summary */
    .bucket-stats-summary { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 16px; border-radius: 14px; background: linear-gradient(140deg, rgba(34, 211, 238, 0.14), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0.01)); border: 1px solid rgba(34, 211, 238, 0.2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.07); opacity: 0; transform: translateY(4px); transition: opacity .16s ease-out, transform .16s ease-out; }
    .bucket-stats-summary.bucket-stats-summary-visible { opacity: 1; transform: translateY(0); }
    .bucket-stats-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
    .bucket-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .bucket-stats-chip { min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.09); background: rgb(10, 20, 38); display: flex; flex-direction: column; gap: 2px; }
    .bucket-stats-chip-key { font-size: 9.5px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: .05em; }
    .bucket-stats-chip-value { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; font-variant-numeric: tabular-nums; }
    .bucket-stats-chip-value .bucket-counter { display: inline-block; min-width: 1ch; }
    .bucket-stats-chip-value-accent { color: #fff; }
    .bucket-stats-chip-new { border-color: rgba(34, 197, 94, 0.35); background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.08)); }
    .bucket-stats-chip-new .bucket-stats-chip-key { color: rgba(187, 247, 208, 0.88); }
    .bucket-stats-chip-new .bucket-stats-chip-value { color: #86efac; }
    .bucket-stats-chip-muted { border-color: rgba(255,255,255,0.09); background: rgb(10, 20, 38); }
    .bucket-stats-chip-muted .bucket-stats-chip-value { color: #fff; font-size: 14px; font-weight: 700; }
    .bucket-stats-chip-upload {
      position: relative;
      overflow: hidden;
      border-style: dashed !important;
      border-color: rgba(46, 209, 244,0.34) !important;
      background: linear-gradient(160deg, rgba(10,18,34,0.98), rgba(7,14,27,0.97)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 18px rgba(0,0,0,0.14);
      cursor: pointer;
      user-select: none;
      transition: border-color .16s ease, background .16s ease, box-shadow .18s ease, transform .16s ease, opacity .15s ease;
    }
    .bucket-stats-chip-upload::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 100% 0%, rgba(46,209,244,0.06), transparent 46%);
      pointer-events: none;
    }
    .bucket-stats-chip-upload:not([data-upload-state="success"]):hover {
      border-style: solid !important;
      border-color: rgba(46, 209, 244,0.56) !important;
      background: linear-gradient(160deg, rgba(13,24,44,0.98), rgba(9,17,31,0.98)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 12px 22px rgba(0,0,0,0.18),
        0 0 0 1px rgba(46,209,244,0.06);
      transform: translateY(-1px);
    }
    .bucket-stats-chip-upload:not([data-upload-state="success"]):focus-visible {
      outline: none;
      border-style: solid !important;
      border-color: rgba(46, 209, 244,0.64) !important;
      box-shadow:
        0 0 0 1px rgba(46,209,244,0.18),
        0 12px 22px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .bucket-stats-chip-upload .bucket-stats-chip-key { color: rgba(46, 209, 244,0.75); }
    .bucket-stats-chip-upload .bucket-stats-chip-value { color: #22d3ee; font-size: 12px; }
    .bucket-stats-chip-upload-value {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      letter-spacing: 0.03em;
    }
    .bucket-stats-chip-upload-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      color: rgba(46,209,244,0.78);
    }
    .bucket-stats-chip-upload-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }
    .bucket-stats-chip-upload-text {
      color: rgba(239,252,255,0.92);
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] {
      cursor: wait;
      border-style: solid !important;
      border-color: rgba(46,209,244,0.34) !important;
      background: linear-gradient(160deg, rgba(13,24,44,0.98), rgba(9,17,31,0.98)) !important;
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] .bucket-stats-chip-upload-icon {
      color: rgba(186,239,249,0.82);
    }
    .bucket-stats-chip-upload[data-upload-state="uploading"] .bucket-stats-chip-upload-text {
      color: rgba(235,248,255,0.82);
    }
    .bucket-stats-chip-upload[data-upload-state="success"] {
      border-style: solid !important;
      border-color: rgba(52,211,153,0.34) !important;
      background: linear-gradient(160deg, rgba(11,26,28,0.96), rgba(7,17,20,0.98)) !important;
    }
    .bucket-stats-chip-upload[data-upload-state="success"]::after {
      background: radial-gradient(circle at 100% 0%, rgba(52,211,153,0.12), transparent 46%);
    }
    .bucket-stats-chip-upload[data-upload-state="success"] .bucket-stats-chip-upload-icon {
      color: #34d399;
    }
    .bucket-stats-chip-upload[data-upload-state="success"] .bucket-stats-chip-upload-text {
      color: rgba(220,252,231,0.92);
    }
    @media (max-width: 639px) {
      .bucket-stats-grid { grid-template-columns: repeat(3, 1fr); }
      .bucket-stats-chip { padding: 6px 6px; }
      .bucket-stats-chip-key { font-size: 8px; }
      .bucket-stats-chip-value { font-size: 11px; }
      .bucket-stats-chip-upload .bucket-stats-chip-value { font-size: 10px; }
      .bucket-stats-chip-upload-value { gap: 4px; }
      .bucket-stats-chip-upload-icon { width: 14px; height: 14px; flex-basis: 14px; }
    }

    .bucket-new-runs-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; background: rgba(16, 185, 129, 0.12); color: #34d399; font-weight: 600; font-size: 12px; border: 1px solid rgba(16, 185, 129, 0.18); }
    .bucket-pending-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; background: rgba(249, 115, 22, 0.12); color: #fb923c; font-weight: 600; font-size: 12px; border: 1px solid rgba(249, 115, 22, 0.18); }
    .bucket-pending-pill .mini-spinner { width: 10px; height: 10px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
    .garmin-permission-warning-actions { display: flex; justify-content: center; margin-top: 14px; margin-bottom: 4px; }
    .garmin-reconnect-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid rgba(248, 113, 113, 0.4);
      background: linear-gradient(135deg, rgba(248, 113, 113, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%);
      color: #fecaca;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1;
      cursor: pointer;
      transition: background 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  border-color 0.3s ease,
                  color 0.3s ease,
                  transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.3s ease;
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .garmin-reconnect-btn:hover {
      background: linear-gradient(135deg, rgba(248, 113, 113, 0.25) 0%, rgba(220, 38, 38, 0.2) 100%);
      border-color: rgba(252, 165, 165, 0.6);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .garmin-reconnect-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(220, 38, 38, 0.15);
    }
    .garmin-reconnect-btn[aria-disabled="true"] { opacity: 0.7; pointer-events: none; transform: none; }
    .garmin-permission-warning-error { margin-top: 8px; color: #fecaca; font-size: 11.5px; line-height: 1.35; }

    /* Upload mode switcher */
    .analysis-header-row {
      position: relative;
      display: block;
      margin-bottom: 0;
      z-index: 240;
      overflow: visible;
      isolation: isolate;
    }
    .analysis-header-row.analysis-header-row-menu-open {
      z-index: 2405;
    }
    .analysis-header-copy {
      min-width: 0;
        max-width: 100%;
      }
      .analysis-header-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.9rem;
        margin-top: 0.625rem;
      }
      .analysis-header-meta p {
        min-width: 0;
        margin: 0;
    }
    .analysis-header-action {
      display: flex;
      align-items: center;
      flex-shrink: 0;
        justify-self: end;
        position: static;
      z-index: 241;
    }
    .profile-toggle-wrap {
      width: clamp(156px, 21vw, 176px);
      max-width: 100%;
    }
    .profile-toggle-wrap .rii-data-toggle {
      width: 100%;
    }
    @keyframes profileToggleChevronFloat {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(1.5px);
      }
    }
    .profile-toggle-wrap .rii-data-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.45rem;
    }
    .profile-toggle-wrap .rii-data-toggle-btn .rii-data-toggle-logo-wrap {
      flex: 1 1 auto;
      min-width: 0;
      justify-content: center;
    }
    .profile-toggle-wrap #profileViewToggleLogo[src*="stryd-logo"],
    .profile-toggle-wrap #profileViewToggleLogo[src*="strava-logo"] {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 34px;
      padding: 10px 10px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #000;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
      display: block;
    }
    .profile-toggle-wrap .rii-data-toggle-logo {
      width: 100%;
      height: 34px;
      border: none;
      border-radius: 9px;
      padding: 0;
      background: transparent;
      box-shadow: none;
      object-fit: contain;
    }
    .profile-toggle-wrap .rii-data-toggle-menu {
      margin-top: 2px;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-menu {
      background: linear-gradient(180deg, rgba(6,10,18,0.97), rgba(2,4,10,0.98));
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.22);
      box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item {
      background: rgba(255,255,255,0.03);
      border-color: rgba(255,255,255,0.06);
      position: relative;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item:hover {
      background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.06);
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18);
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-item.is-active {
      background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.05);
      border-color: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.32);
      box-shadow: 0 0 12px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.08), inset 0 0 12px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.04);
    }
    /* Black-background Garmin PNG: blend into dark item via tight wrapper */
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="Garmin"] {
      border-radius: 6px;
      background: #000;
      padding: 4px 10px;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
    }
    .profile-toggle-wrap .rii-data-toggle-item {
      justify-content: center;
      min-height: 46px;
      padding: 5px 10px;
    }
    .profile-toggle-wrap .rii-data-toggle-chevron {
      width: 14px;
      height: 14px;
      color: rgba(255,255,255,0.78);
      flex-shrink: 0;
      transform-origin: center;
      transition: transform 0.24s ease, color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
    }
    .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron {
      transform: rotate(180deg) scale(1.03);
      color: rgba(255,255,255,0.96);
    }
    @media (prefers-reduced-motion: reduce) {
      .profile-toggle-wrap .rii-data-toggle-chevron {
        animation: none !important;
        transition: none !important;
      }
    }
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"],
    .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"] {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: 34px;
      padding: 10px 10px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #000;
      box-shadow: 0 0 8px rgba(0,0,0,0.6);
      display: block;
    }
    @media (max-width: 640px) {
      .analysis-header-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.55rem;
        row-gap: 0.48rem;
        max-width: 100%;
        min-width: 0;
      }
      .page-title {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
      }
      .analysis-header-meta {
        display: contents;
      }
      .analysis-header-meta p {
        grid-column: 1 / -1;
        grid-row: 2;
      }
      .analysis-header-action {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        margin-top: 0;
      }
      .profile-toggle-wrap {
        width: 108px;
      }
      .profile-toggle-wrap .rii-data-toggle-btn {
        min-height: 32px;
        border-radius: 9px;
        padding: 4px 7px 4px 5px;
      }
      .profile-toggle-wrap .rii-data-toggle-logo {
        height: 24px;
      }
      .profile-toggle-wrap #profileViewToggleLogo[src*="stryd-logo"],
      .profile-toggle-wrap #profileViewToggleLogo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 24px;
        padding: 6px 8px;
        box-sizing: border-box;
      }
      .profile-toggle-wrap .rii-data-toggle-chevron {
        width: 12px;
        height: 12px;
        padding: 2px;
        border-radius: 999px;
        color: rgba(255,255,255,0.92);
        background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.14);
        box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.18), 0 0 14px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.16);
        animation: profileToggleChevronFloat 2.2s ease-in-out infinite;
      }
      .profile-toggle-wrap .rii-data-toggle.rii-data-toggle-open .rii-data-toggle-chevron {
        animation: none;
        transform: rotate(180deg) scale(1.06);
        background: rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2);
        box-shadow: inset 0 0 0 1px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.28), 0 0 16px rgba(var(--rii-toggle-accent-rgb, 46, 209, 244), 0.2);
      }
      .profile-toggle-wrap .rii-data-toggle-item {
        min-height: 38px;
        padding: 4px 8px;
      }
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"],
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 24px;
        padding: 6px 8px;
        box-sizing: border-box;
      }
    }


    #selectedWatch,
    #selectedWornShoe {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
      margin-bottom: 0;
    }

    #selectedWatch.has-content,
    #selectedWornShoe.has-content {
      max-height: 220px;
      opacity: 1;
      transform: translateY(0);
      margin-bottom: 1rem;
    }

    #selectedWornShoe.has-image.has-content {
      margin-bottom: 0.4rem;
    }

    #selectedShoes {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transform: translateY(-8px);
      transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-top 0.3s ease;
      margin-top: 0;
    }

    #selectedShoes.has-content {
      max-height: 500px;
      opacity: 1;
      transform: translateY(0);
      margin-top: 0.75rem;
    }

    .shoe-tag {
      display: inline-flex !important;
      animation: tagFadeIn 0.3s ease forwards;
    }

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


    #pricingBreakdown,
    #priceLabel,
    #submitBtn span {
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #pricingBreakdown.updating,
    #priceLabel.updating,
    #submitBtn.updating span {
      opacity: 0.3;
      transform: scale(0.98);
    }


    body {
      transition: opacity 0.4s ease;
    }

    body.fade-out {
      opacity: 0;
    }

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

    /* -- Full-screen analysis loading overlay (matches report.html loading) -- */
    #analysisLoadingOverlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    #analysisLoadingOverlay.active {
      display: flex;
      opacity: 1;
    }
    /* Logo + circle container */
    .overlay-logo-wrap {
      position: relative;
      width: 220px;
      height: 220px;
      margin-bottom: 32px;
    }
    .overlay-logo-wrap img {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      height: 52px;
      z-index: 10;
      filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
    }
    .overlay-logo-wrap .overlay-glow {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 140px; height: 140px;
      background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
      border-radius: 50%;
    }
    .overlay-logo-wrap svg {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      transform: rotate(-90deg);
    }
    @keyframes overlayDrawCircle {
      0%   { stroke-dashoffset: 502; }
      50%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -502; }
    }
    .overlay-circle-line {
      animation: overlayDrawCircle 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    /* Title + subtitle beneath logo */
    .overlay-title {
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      letter-spacing: -0.01em;
      text-align: center;
      margin-bottom: 6px;
      transition: color 0.35s ease;
    }
    .overlay-subtitle {
      color: rgba(255,255,255,0.4);
      font-size: 13px;
      text-align: center;
      margin-bottom: 28px;
    }

    .hero-upload-zone {
      position: relative;
      border: 2px dashed rgba(34, 211, 238, 0.5) !important;
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03)) !important;
      transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .hero-upload-zone:hover {
      border-color: var(--accent-cyan) !important;
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.06)) !important;
      box-shadow: 0 0 30px rgba(34, 211, 238, 0.15), var(--shadow-inner);
    }

    .hero-upload-zone.dragover {
      border-color: var(--accent-cyan) !important;
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.1)) !important;
      box-shadow: 0 0 40px rgba(34, 211, 238, 0.25), var(--shadow-inner);
      transform: scale(1.01);
    }


    .secondary-section {
      opacity: var(--opacity-secondary);
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.035), rgba(34, 211, 238, 0.015)) !important;
      border-color: rgba(34, 211, 238, 0.12) !important;
    }

    .secondary-section:hover {
      opacity: 1;
    }

    .strava-quick-pick-card {
      position: relative;
      isolation: isolate;
      z-index: 20;
      margin-bottom: 12px;
      padding: 14px 14px 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(252, 76, 2, 0.18);
      background: linear-gradient(140deg, rgba(252, 76, 2, 0.09), rgba(252, 76, 2, 0.02));
      box-shadow: inset 0 0 0 1px rgba(252, 76, 2, 0.05);
      overflow: visible;
      transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
    }

    .strava-quick-pick-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.26) 0%, rgba(252, 76, 2, 0.12) 32%, rgba(252, 76, 2, 0.03) 52%, rgba(252, 76, 2, 0) 72%),
        radial-gradient(ellipse at 52% 98%, rgba(255, 128, 72, 0.1) 0%, rgba(252, 76, 2, 0.04) 36%, rgba(252, 76, 2, 0) 64%);
      filter: blur(14px);
      opacity: 0.75;
      z-index: 0;
    }

    .strava-quick-pick-card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(ellipse at 50% 100%, rgba(252, 96, 26, 0.34) 0%, rgba(252, 76, 2, 0.18) 44%, rgba(252, 76, 2, 0) 82%);
      filter: blur(10px);
      opacity: 0;
      transform: scale(0.985);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 0;
    }

    .strava-quick-pick-card > * {
      position: relative;
      z-index: 1;
    }

    .strava-quick-pick-card: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-quick-pick-card:hover::after {
      opacity: 1;
      transform: scale(1);
    }

    .strava-quick-pick-card:hover .strava-quick-pick-input {
      border-color: rgba(252, 76, 2, 0.62);
      box-shadow: 0 0 18px rgba(252, 76, 2, 0.28), inset 0 0 24px rgba(252, 76, 2, 0.08);
    }

    .strava-quick-pick-card.dropdown-open {
      z-index: 2147483640;
    }

    .strava-quick-pick-label {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: rgba(255, 239, 228, 0.92);
      font-size: 0.86rem;
      font-weight: 600;
      letter-spacing: 0.01em;
    }

    .strava-quick-pick-input {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(252, 76, 2, 0.5) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.12), rgba(252, 76, 2, 0.03));
      backdrop-filter: blur(8px);
      color: white;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .strava-quick-pick-input::placeholder {
      color: rgba(255, 218, 191, 0.65);
    }

    .strava-quick-pick-input:focus {
      outline: none;
      border-color: #FC4C02 !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.14), rgba(252, 76, 2, 0.04)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.3), 0 0 30px rgba(252, 76, 2, 0.14) !important;
    }

    .strava-quick-pick-input.strava-picked-valid,
    .strava-quick-pick-input.strava-picked-valid:focus {
      border-color: rgba(252, 76, 2, 0.78) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.13), rgba(252, 76, 2, 0.04)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.24), 0 0 32px rgba(252, 76, 2, 0.12) !important;
    }

    .strava-autofill-field {
      border-color: rgba(252, 76, 2, 0.72) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.1), rgba(252, 76, 2, 0.03)) !important;
      box-shadow: 0 0 16px rgba(252, 76, 2, 0.2), 0 0 30px rgba(252, 76, 2, 0.1) !important;
    }

    .strava-autofill-field:focus {
      border-color: rgba(252, 76, 2, 0.84) !important;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.14), rgba(252, 76, 2, 0.05)) !important;
      box-shadow: 0 0 18px rgba(252, 76, 2, 0.28), 0 0 34px rgba(252, 76, 2, 0.14) !important;
    }

    #stravaShoeQuickPickDropdown.shoe-dropdown {
      z-index: 2147483647 !important;
      background: linear-gradient(135deg, rgba(28, 10, 5, 0.995), rgba(18, 7, 4, 0.995));
      border: 1px solid rgba(252, 76, 2, 0.44);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(252, 76, 2, 0.16), inset 0 0 24px rgba(252, 76, 2, 0.07);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
    }

    #stravaShoeQuickPickDropdown .shoe-option:hover {
      background: linear-gradient(90deg, rgba(252, 76, 2, 0.2), rgba(252, 76, 2, 0.08));
      border-left: 3px solid #FC4C02;
      box-shadow: inset 0 0 22px rgba(252, 76, 2, 0.2);
    }

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

    .strava-connect-prompt-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.3) 0%, rgba(252, 76, 2, 0.16) 28%, rgba(252, 76, 2, 0.07) 44%, rgba(252, 76, 2, 0.01) 56%, rgba(252, 76, 2, 0) 68%),
        radial-gradient(ellipse at 52% 98%, rgba(255, 128, 72, 0.12) 0%, rgba(252, 76, 2, 0.05) 34%, rgba(252, 76, 2, 0) 60%);
      filter: blur(18px);
      opacity: 0.9;
      z-index: 0;
    }

    .strava-connect-prompt-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.24) 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-connect-prompt-card > * {
      position: relative;
      z-index: 1;
    }

    .strava-connect-prompt-card: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-connect-prompt-card:hover::after {
      opacity: 1;
      transform: translateY(0) scaleX(1);
    }

    .strava-connect-prompt-head {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 239, 228, 0.95);
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .strava-connect-prompt-copy {
      color: rgba(255, 222, 197, 0.8);
      font-size: 0.8rem;
      line-height: 1.45;
      margin-bottom: 10px;
    }

    .strava-connect-prompt-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 9px;
      border: 1px solid rgba(252, 76, 2, 0.55);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      background: linear-gradient(135deg, rgba(252, 76, 2, 0.92), rgba(227, 68, 2, 0.92));
      box-shadow: 0 4px 14px rgba(252, 76, 2, 0.22);
      transition: transform 200ms ease, box-shadow 220ms ease, border-color 220ms ease;
    }

    .strava-connect-prompt-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(252, 76, 2, 0.8);
      box-shadow: 0 8px 20px rgba(252, 76, 2, 0.32);
    }

    .strava-connect-prompt-btn:disabled {
      opacity: 0.8;
      pointer-events: none;
      transform: none;
    }

    .strava-connect-prompt-error {
      margin-top: 8px;
      color: #fca5a5;
      font-size: 0.78rem;
      line-height: 1.35;
    }


    .section-group-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
      margin: 1.5rem 0;
    }


    .cta-endpoint {
      position: relative;
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
      border: 0.5px solid rgba(255,255,255,0.1) !important;
      box-shadow: 0 16px 56px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);
    }

    .cta-endpoint::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
    }


    #submitBtn {
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }


    #submitBtn {
      padding-top: 14px !important;
      padding-bottom: 14px !important;
      min-height: 52px;
    }

    #submitBtn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    #submitBtn:hover::before {
      opacity: 1;
    }


    .section-header-icon {
      color: var(--accent-cyan);
      filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.3));
    }


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


    .secondary-section:hover {
      opacity: var(--opacity-secondary);
    }




    .understanding-matches-row {
      display: flex;
      gap: 1rem;
      justify-content: flex-start;
    }


    .tier-showcase-card {
      position: relative;
      z-index: 1;
      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);
      flex: 1;
      min-width: 0;
      height: 280px;
      min-height: 280px;
      max-height: 280px;
      transition: box-shadow 1s cubic-bezier(0.4, 0, 0.2, 1),
                  border-color 1s cubic-bezier(0.4, 0, 0.2, 1);
    }


    .tier-showcase-card[data-tier="great"] {
      border-color: rgba(46, 209, 244, 0.35) !important;
    }
    .tier-showcase-card[data-tier="great"]:hover {
      border-color: rgba(46, 209, 244, 0.6) !important;
    }

    .tier-showcase-card[data-tier="good"] {
      border-color: rgba(1, 195, 168, 0.35) !important;
    }
    .tier-showcase-card[data-tier="good"]:hover {
      border-color: rgba(1, 195, 168, 0.6) !important;
    }

    .tier-showcase-card[data-tier="warning"] {
      border-color: rgba(255, 183, 65, 0.35) !important;
    }
    .tier-showcase-card[data-tier="warning"]:hover {
      border-color: rgba(255, 183, 65, 0.6) !important;
    }
    .tier-showcase-card:hover {
      z-index: 12;
    }


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


    .tier-label {
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      text-align: center;
    }
    .tier-label.great { color: #22d3ee; }
    .tier-label.good { color: #01c3a8; }
    .tier-label.warning { color: #ffb741; }


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

    .tier-card-content .shoe-image-wrapper img {
      max-width: 175px;
      max-height: 95px;
      object-fit: contain;
    }


    .tier-card-content .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%;
    }


    .tier-card-content .tier-divider {
      width: 85%;
      height: 1px;
      margin: 6px 0 8px 0;
    }
    .tier-divider.great { background: linear-gradient(90deg, transparent, rgba(46, 209, 244, 0.5), transparent); }
    .tier-divider.good { background: linear-gradient(90deg, transparent, rgba(1, 195, 168, 0.5), transparent); }
    .tier-divider.warning { background: linear-gradient(90deg, transparent, rgba(255, 183, 65, 0.5), transparent); }


    .tier-card-content .tier-description {
      font-size: 0.7rem;
      color: rgba(255,255,255,0.65);
      text-align: center;
      line-height: 1.5;
      padding: 0 0.5rem;
      flex: 1;
      display: flex;
      align-items: center;
    }


    .tier-showcase-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;
    }

    .tier-showcase-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;
    }

    .tier-showcase-card:hover .metric-card-blur img {
      opacity: 0.95 !important;
    }


    @media (max-width: 639px) {
      .understanding-matches-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
      }

      .tier-showcase-card {
        width: 100% !important;
        height: 220px;
        min-height: 220px;
        max-height: 220px;
      }

      .tier-card-content .shoe-image-wrapper {
        height: 70px;
      }

      .tier-card-content .shoe-image-wrapper img {
        max-width: 120px;
        max-height: 65px;
      }

      .tier-card-content .tier-description {
        font-size: 0.65rem;
      }
    }



    @media (min-width: 640px) {
      #shoeTypeButtons button {
        padding: 1.5rem !important;
        font-size: 1rem !important;
      }

      #greatMatchButtons button,
      #goodMatchButtons button {
        padding: 1.5rem !important;
      }

      #greatMatchButtons button .text-lg,
      #goodMatchButtons button .text-lg {
        font-size: 1.125rem !important;
      }

      #greatMatchButtons button .text-sm,
      #goodMatchButtons button .text-sm {
        font-size: 0.875rem !important;
      }
    }

    @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;
      }


      #fileInfo {
        gap: 6px !important;
        padding: 8px !important;
      }

      #fileInfo > div {
        flex: 1;
        min-width: 0;
        overflow: hidden;
      }

      #fileInfo #fileName {
        font-size: 13px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #fileInfo #fileSize {
        font-size: 11px !important;
      }

      #fileInfo button {
        padding: 5px 8px !important;
        font-size: 11px !important;
        flex-shrink: 0;
      }


      #runTypeButtons button {
        padding: 0.9rem 0.9rem !important;
      }


      .mobile-understanding-matches {
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
      }


      #shoeTypeButtons button {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
      }


      #greatMatchButtons button,
      #goodMatchButtons button {
        padding: 0.75rem !important;
      }

      #greatMatchButtons button .text-lg,
      #goodMatchButtons button .text-lg {
        font-size: 0.9rem !important;
      }

      #greatMatchButtons button .text-sm,
      #goodMatchButtons button .text-sm {
        font-size: 0.75rem !important;
      }


      [data-static-text="true"] {
        pointer-events: none;
      }
    }


      @media (max-width: 1023px) {
        header {
          background: var(--mobile-header-overlay) !important;
          backdrop-filter: blur(8px) !important;
          -webkit-backdrop-filter: blur(8px) !important;

          padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem) !important;
          padding-bottom: 0.75rem !important;
        }

        header[data-sticky="true"],
        header[data-nav-open="true"] {
          background: var(--mobile-sticky-overlay) !important;
          backdrop-filter: blur(10px) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          padding-bottom: 0 !important;
        }
      }


      header[data-nav-open="true"] {
        background: var(--mobile-navopen-overlay) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
      }
      header[data-sticky="true"][data-at-bottom="true"]:not([data-nav-open="true"]) {
        background: var(--mobile-sticky-overlay-bottom) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
      }


/* === Stryd-specific CSS === */
    .activity-shoe-pill {
      display: inline-flex;
      align-items: center;
      flex: 0 1 auto;
      min-width: 0;
      max-width: none;
      overflow: visible;
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: 0.68rem;
      font-weight: 500;
      white-space: nowrap;
      background: rgba(160, 160, 160, 0.1);
      border: 1px solid rgba(160, 160, 160, 0.25);
      color: rgba(255, 255, 255, 0.65);
      position: relative;
      z-index: 2;
      transform-origin: left center;
      isolation: isolate;
      backface-visibility: hidden;
      transition:
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        margin-right 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.03s,
        box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.22s ease,
        color 0.22s ease;
      will-change: transform, margin-right;
    }
    .activity-shoe-editor-input {
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
      color: white;
      padding: 12px 14px;
      font-size: 0.92rem !important;
    }
    .activity-shoe-editor-input:focus {
      outline: none;
      border-color: rgba(148, 163, 184, 0.6);
      box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
    }
    .activity-shoe-editor-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .activity-shoe-editor-btn.secondary {
      background: rgba(255,255,255,0.06);
      color: white;
    }
    @media (max-width: 640px) {
      .max-shoes-toast {
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-100px);
        width: auto;
      }
      .max-shoes-toast.show {
        transform: translateX(0) translateY(0);
      }
      .max-shoes-toast .toast-message {
        max-width: none;
      }

      .activity-shoe-editor-grid {
        grid-template-columns: 1fr;
      }

      .activity-shoe-editor-modal {
        padding: 18px;
      }
    }
    .bio-metric-empty {
      display: none;
      margin-top: 14px;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: linear-gradient(160deg, rgba(148, 163, 184, 0.08), rgba(15, 23, 42, 0.55));
      color: rgba(255,255,255,0.82);
      font-size: 0.86rem;
      line-height: 1.6;
    }
    .di-dropdown-item-icon { flex-shrink: 0; opacity: 0.65; }
    .drift-hr-window-tag--icon-only { padding: 2px 4px; }
    .secondary-section {
      opacity: var(--opacity-secondary);
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.035), rgba(148, 163, 184, 0.015)) !important;
      border-color: rgba(148, 163, 184, 0.12) !important;
    }
    .secondary-section:hover {
      opacity: 1;
    }
    .secondary-section:hover {
      opacity: var(--opacity-secondary);
    }
    .profile-toggle-wrap .rii-data-toggle[data-source="stryd"] {
      --rii-toggle-accent-rgb: 254, 202, 47;
      --rii-toggle-accent: #feca2f;
    }
    .stryd-processing-shell {
      position: relative;
      z-index: 100;
      background: transparent;
      padding: 0;
      border-radius: 0;
      border: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
      box-shadow: none;
    }
    #strydDropZone {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 204px;
      padding: 1.75rem 1.5rem;
      border-radius: 14px;
      border: 1px solid rgba(252, 96, 28, 0.28);
      background-image:
        radial-gradient(circle at 50% -22%, rgba(252, 76, 2, 0.16), transparent 44%),
        linear-gradient(rgba(252, 76, 2, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(252, 76, 2, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(10, 20, 38, 0.82), rgba(4, 10, 22, 0.78));
      background-size: auto, 36px 36px, 36px 36px, auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.02), 0 18px 48px rgba(0, 0, 0, 0.26);
      text-align: center;
      cursor: pointer;
      transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
    }
    #strydDropZone::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(90deg, rgba(252, 76, 2, 0.13), transparent 20%, transparent 80%, rgba(255, 128, 72, 0.1)),
        radial-gradient(circle at 50% 52%, rgba(252, 76, 2, 0.075) 0%, rgba(252, 76, 2, 0) 54%);
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #strydDropZone::after {
      content: '';
      position: absolute;
      inset: 12px;
      border-radius: 10px;
      border: 1px dashed rgba(148, 163, 184, 0.22);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
      pointer-events: none;
      z-index: 0;
      transition: inset 240ms ease, border-color 240ms ease;
    }
    #strydDropZone > * {
      position: relative;
      z-index: 1;
    }
    #strydDropZone:hover,
    #strydDropZone.dragover,
    #strydDropZone:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(252, 96, 28, 0.52);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(252, 76, 2, 0.06), 0 22px 58px rgba(0, 0, 0, 0.3), 0 0 26px rgba(252, 76, 2, 0.12);
    }
    #strydDropZone:focus-visible {
      outline: 2px solid rgba(252, 96, 28, 0.44);
      outline-offset: 4px;
    }
    #strydDropZone:hover::before,
    #strydDropZone.dragover::before,
    #strydDropZone:focus-visible::before {
      opacity: 1;
      transform: scale(1.02);
    }
    #strydDropZone:hover::after,
    #strydDropZone.dragover::after,
    #strydDropZone:focus-visible::after {
      inset: 11px;
      border-color: rgba(252, 96, 28, 0.38);
    }
    .stryd-upload-glow {
      position: absolute;
      top: 0;
      left: 50%;
      width: min(430px, 68%);
      height: 2px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, transparent, rgba(252, 76, 2, 0.7), rgba(255, 128, 72, 0.48), transparent);
      filter: none;
      opacity: 0.68;
      pointer-events: none;
      z-index: 0;
      transform: translateX(-50%);
      transition: opacity 240ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #strydDropZone:hover .stryd-upload-glow,
    #strydDropZone.dragover .stryd-upload-glow {
      opacity: 1;
      transform: translateX(-50%) scaleX(1.06);
    }
    .stryd-processing-overlay {
      display: none;
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: rgba(3, 7, 18, 0.84);
      border: 1px solid rgba(252, 96, 28, 0.22);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .stryd-processing-status {
      text-align: center;
    }
    .stryd-processing-spinner {
      width: 46px;
      height: 46px;
      margin: 0 auto 12px;
      border: 2px solid rgba(252, 76, 2, 0.18);
      border-top-color: #FC4C02;
      border-radius: 50%;
      animation: proc-spin 1s linear infinite;
    }
    .stryd-processing-copy {
      font-size: 0.82rem;
      color: rgba(255, 239, 228, 0.84);
      letter-spacing: 0.01em;
    }
    .stryd-upload-logo-shell {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(160px, 62%);
      min-height: 34px;
      padding: 0;
      box-sizing: border-box;
      border-radius: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .stryd-upload-logo {
      display: block;
      width: 100%;
      max-width: 150px;
      height: auto;
      filter: drop-shadow(0 8px 18px rgba(252, 76, 2, 0.1));
    }
    .stryd-upload-icon {
      width: 26px;
      height: 26px;
      color: rgba(252, 96, 28, 0.88);
      opacity: 0.95;
    }
    .stryd-upload-title-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
    }
    .stryd-upload-title {
      color: #ffffff;
      font-size: clamp(1.12rem, 2.3vw, 1.3rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }
    .stryd-upload-copy {
      max-width: 44ch;
      color: rgba(203, 213, 225, 0.74);
      font-size: 0.8rem;
      line-height: 1.45;
    }
    .stryd-upload-copy strong {
      color: rgba(255, 239, 228, 0.98);
      font-weight: 600;
    }
    #strydUploadProgress {
      max-width: 340px;
      margin: 4px auto 0;
    }
    #strydUploadStatus {
      font-size: 12px;
      color: rgba(255, 218, 191, 0.78);
      margin-top: 6px;
      text-align: center;
    }
    #strydUploadError {
      max-width: 420px;
      margin: 0 auto;
      color: #fecaca;
      font-size: 13px;
      padding: 0.75rem 1rem;
      background: rgba(127, 29, 29, 0.28);
      border-radius: 12px;
      border: 1px solid rgba(248, 113, 113, 0.25);
      text-align: center;
    }
    .stryd-upload-progress-track {
      width: 100%;
      max-width: 280px;
      height: 4px;
      border-radius: 999px;
      background: rgba(252, 76, 2, 0.14);
      overflow: hidden;
      margin: 4px auto 0;
    }
    .stryd-upload-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #FC4C02, #ff7a33, #ffb06b);
      border-radius: 999px;
      transition: width 0.3s ease;
    }
    @media (max-width: 640px) {
      .analysis-header-row {
        display: block;
        min-height: 0;
        margin-bottom: 2rem !important;
      }
      .page-title {
        font-size: clamp(1.85rem, 8vw, 2.15rem) !important;
      }
      .analysis-header-copy {
        max-width: 100%;
        min-width: 0;
      }
      .analysis-header-copy p {
        max-width: 26ch;
      }
      .analysis-header-meta {
        column-gap: 0.5rem;
      }
      .analysis-header-action {
        margin-top: 0;
      }
      .profile-toggle-wrap {
        width: 116px;
      }
      .profile-toggle-wrap .rii-data-toggle {
        width: 100%;
      }
      .profile-toggle-wrap .rii-data-toggle-btn {
        min-height: 34px;
        border-radius: 9px;
        padding: 4px 8px 4px 6px;
      }
      .profile-toggle-wrap .rii-data-toggle-logo {
        height: 26px;
      }
      .profile-toggle-wrap #profileViewToggleLogo[src*="stryd-logo"],
      .profile-toggle-wrap #profileViewToggleLogo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 26px;
        padding: 7px 8px;
        box-sizing: border-box;
      }
      .profile-toggle-wrap .rii-data-toggle-chevron {
        width: 12px;
        height: 12px;
      }
      .profile-toggle-wrap .rii-data-toggle-item {
        min-height: 38px;
        padding: 4px 8px;
      }
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="stryd-logo"],
      .profile-toggle-wrap .rii-data-toggle-item .rii-data-toggle-logo[src*="strava-logo"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 26px;
        padding: 7px 8px;
        box-sizing: border-box;
      }
      /* Section padding reduction */
      .mobile-card-tight {
        padding: 1.25rem 1rem !important;
      }

      /* Upload zone */
      #strydDropZone {
        padding: 1.35rem 1rem;
        min-height: 188px;
        gap: 12px;
      }
      #strydDropZone::after {
        inset: 8px;
        border-radius: 14px;
      }
      .stryd-upload-logo-shell {
        width: min(132px, 60%);
        min-height: 28px;
      }
      .stryd-upload-logo {
        max-width: 124px;
      }
      .stryd-upload-icon {
        width: 22px;
        height: 22px;
      }
      .stryd-upload-title {
        font-size: 0.98rem;
      }
      .stryd-upload-copy {
        font-size: 0.74rem;
      }

      /* Bio controls wrap */
      .bio-controls-wrap {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
      }

      /* Bio date range inputs */
      .bio-period-picker input[type="date"],
      .bio-period-picker input[type="datetime-local"],
      .bio-period-input {
        width: 100% !important;
        min-width: unset !important;
      }

      /* Bio bracket slider - reduce font sizes */
      .bio-bracket-slider-wrap {
        padding: 10px 12px !important;
      }
      .bio-slider-label {
        font-size: 0.72rem !important;
      }
      .bio-slider-sub {
        font-size: 0.65rem !important;
      }

      /* Envelope controls grid - single column */
      #envelopeControlsGrid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }
      #envelopeControlsGrid > div {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        padding-bottom: 8px;
      }
      #envelopeControlsGrid > div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        padding-left: 0 !important;
      }

      /* Drift window controls - wrap */
      .drift-window-controls {
        flex-wrap: wrap !important;
        gap: 6px !important;
      }
      .dw-nudge-wrap {
        order: 1;
      }
      .drift-window-save-btn,
      .drift-window-reset-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
      }

      /* Drift chart canvas heights on mobile */
      .drift-inspector-charts .drift-chart-container {
        height: 200px !important;
      }
      /* Drift summary cards - single column */
      .drift-inspector-summary {
        grid-template-columns: 1fr !important;
      }

      /* Hide distance + pace columns on mobile */
      #strydRunAnalysisSection .ao-col-dist,
      #strydRunAnalysisSection .ao-col-pace { display: none !important; }
      #strydRunAnalysisSection col.ao-col-dist,
      #strydRunAnalysisSection col.ao-col-pace { visibility: collapse; width: 0 !important; }
    }

    /* -- Mobile audit fixes -- */
    .mobile-chart-scroll {
      position: relative;
    }
    .mobile-chart-stage {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .fr-bottom-row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    .rmt-scroll-shell {
      width: 100%;
    }
    @media (max-width: 640px) {
      .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;
      }

      .profile-mobile-bg {
        display: block !important;
      }

      .mobile-analytics-section {
        padding: 0.75rem 0.75rem !important;
        padding-top: 0.75rem !important;
      }

      /* Flatten redundant inner paint on mobile; the outer analytics shell already frames the section. */
      #strydRunAnalysisSection .stryd-processing-shell {
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #strydDropZone {
        min-height: 0 !important;
        padding: 1.05rem 0.95rem !important;
        border-radius: 14px !important;
        border: 1px dashed rgba(252, 96, 28, 0.28) !important;
        background: rgba(252, 76, 2, 0.045) !important;
        box-shadow: none !important;
      }

      #strydDropZone::before,
      #strydDropZone::after,
      .stryd-upload-glow {
        display: none !important;
      }

      #strydDropZone:hover,
      #strydDropZone.dragover {
        transform: none !important;
        background: rgba(252, 76, 2, 0.06) !important;
        border-color: rgba(252, 96, 28, 0.36) !important;
        box-shadow: none !important;
      }

      #biomechanicalProfileSection .bio-explanation-box {
        margin-top: 0.6rem !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      #biomechanicalProfileSection .bio-explanation-container {
        transition: opacity 0.2s ease-out, margin-top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      }

      #biomechanicalProfileSection .bio-metric-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card {
        filter: none !important;
      }

      #biomechanicalProfileSection #bioExplTriangle {
        display: none !important;
      }

      #biomechanicalProfileSection .bio-sig-section {
        margin-top: 1rem !important;
        padding-top: 0.95rem !important;
      }

      #biomechanicalProfileSection .bio-sig-card {
        padding: 0 !important;
        gap: 0.75rem !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #biomechanicalProfileSection .bio-sig-dominant-panel,
      #biomechanicalProfileSection .bio-sig-panel,
      #biomechanicalProfileSection .bio-sig-explainer {
        padding: 0.9rem 0.95rem !important;
        border-color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.16) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 10px 24px rgba(0,0,0,0.16) !important;
      }

      #biomechanicalProfileSection .bio-sig-dominant-panel {
        background:
          radial-gradient(circle at top center, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.18), transparent 72%),
          linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.17), rgba(255,255,255,0.035)) !important;
        border-color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.24) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 26px rgba(0,0,0,0.18) !important;
      }

      #biomechanicalProfileSection .bio-sig-panel {
        background:
          linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.11), rgba(255,255,255,0.028)) !important;
      }

      #biomechanicalProfileSection .bio-sig-explainer {
        background:
          linear-gradient(180deg, rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.09), rgba(255,255,255,0.022)) !important;
      }

      #biomechanicalProfileSection .bio-sig-panel .bio-sig-panel-label,
      #biomechanicalProfileSection .bio-sig-explainer .bio-expl-mini-label {
        color: rgba(var(--bio-sig-accent-rgb, 148, 163, 184), 0.82) !important;
      }

      .analysis-header-row {
        margin-bottom: 1.12rem !important;
        align-items: flex-start !important;
      }

      .page-title {
        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;
      }

      .page-title::after {
          display: none;
      }

      .analysis-header-copy p {
        grid-column: 1 / -1;
        margin-top: 0 !important;
        max-width: none;
        font-size: 0.88rem !important;
        line-height: 1.42 !important;
        letter-spacing: -0.01em;
        color: rgba(255,255,255,0.58) !important;
      }

      .drift-shell-title {
        font-size: 1.18rem !important;
        line-height: 1.08;
        gap: 10px;
      }

      html[data-run-it-native-shell="1"] .mobile-analytics-section > div:first-child {
        gap: 6px !important;
        margin-bottom: 2px !important;
      }

      html[data-run-it-native-shell="1"] .drift-shell-divider {
        margin: 2px 0 !important;
      }

      html[data-run-it-native-shell="1"] .drift-shell-copy {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
        line-height: 1.3;
      }

      .section-tooltip {
        min-width: 0 !important;
        width: min(calc(100vw - 24px), 420px) !important;
        max-width: calc(100vw - 24px) !important;
        padding: 14px !important;
      }

      #strydRunAnalysisSection .frp-section-intro {
        display: none !important;
      }

      .activity-overview-section {
        margin-top: 8px;
        padding: 0;
        border-radius: 0;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
      }
      .activity-overview-section-label {
        padding: 0;
        margin-bottom: 6px;
      }
      .activity-overview-wrap {
        position: relative;
        max-height: 280px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: contain;
        touch-action: pan-x pan-y;
        scrollbar-width: thin;
        scrollbar-color: rgba(34, 211, 238, 0.25) transparent;
      }
      .activity-overview-wrap::-webkit-scrollbar { height: 4px; }
      .activity-overview-wrap::-webkit-scrollbar-track { background: transparent; }
      .activity-overview-wrap::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, 0.2); border-radius: 2px; }
      .activity-overview-wrap.ao-can-scroll-x.ao-at-left:not(.ao-at-right) {
        box-shadow: inset -16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-can-scroll-x:not(.ao-at-left):not(.ao-at-right) {
        box-shadow: inset 16px 0 18px -18px rgba(2, 6, 23, 0.96), inset -16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-can-scroll-x:not(.ao-at-left).ao-at-right {
        box-shadow: inset 16px 0 18px -18px rgba(2, 6, 23, 0.96);
      }
      .activity-overview-wrap.ao-fade-right {
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
      }
      .activity-overview-wrap.ao-fade-right.ao-fade-bottom {
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        -webkit-mask-composite: destination-in;
        mask-composite: intersect;
      }
      .activity-overview-wrap.ao-fade-right.ao-at-right {
        -webkit-mask-image: none;
        mask-image: none;
      }
      .activity-overview-wrap.ao-fade-right.ao-at-right.ao-fade-bottom:not(.ao-at-bottom) {
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
      }

      .bucket-stats-summary {
        padding: 0 !important;
        gap: 6px !important;
        margin-bottom: 18px !important;
        border-radius: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      .activity-overview-table {
        table-layout: auto;
        min-width: 560px;
        width: 100%;
      }
      .activity-overview-table th,
      .activity-overview-table td {
        padding: 5px 6px !important;
        font-size: 10px !important;
      }
      .ao-pill { font-size: 9px; padding: 1px 5px; }
      .ao-reason { font-size: 9px; }
      .ao-new-badge { min-width: 12px; height: 12px; font-size: 8px; padding: 0 2px; }

      .ao-col-dist,
      .ao-col-pace {
        display: none !important;
      }
      col.ao-col-dist,
      col.ao-col-pace {
        visibility: collapse;
        width: 0 !important;
      }
      .ao-col-device {
        display: table-cell;
      }
      col.ao-col-device {
        visibility: visible;
        width: auto !important;
      }
      col.ao-col-drift {
        width: 96px !important;
      }
      /* Keep the full Garmin-style date button readable in the horizontal log. */
      #strydRunAnalysisSection .activity-overview-table col.ao-col-date {
        width: 112px !important;
      }
      #strydRunAnalysisSection .activity-overview-table th.ao-col-date,
      #strydRunAnalysisSection .activity-overview-table td.ao-col-date {
        padding-inline: 6px !important;
        overflow: visible;
        text-overflow: clip;
      }
      #strydRunAnalysisSection .ao-date-button {
        gap: 4px;
        padding-inline: 6px;
        width: max-content;
        max-width: none;
        font-size: 10px !important;
      }
      #strydRunAnalysisSection .ao-date-button-label {
        flex: 0 0 auto;
        overflow: visible;
        text-overflow: clip;
      }

      .activity-overview-table th.ao-col-device,
      .activity-overview-table td.ao-col-device {
        min-width: 132px;
        width: auto;
        max-width: none;
        overflow: visible;
        white-space: nowrap;
      }
      .activity-overview-table th.ao-col-drift,
      .activity-overview-table td.ao-col-drift {
        min-width: 96px;
        width: 96px;
      }
      .ao-device-cell {
        width: max-content;
        max-width: none;
        min-width: max-content;
        overflow: visible;
      }
      .ao-drift-cell {
        flex-wrap: nowrap;
        gap: 4px;
      }
      .ao-drift-cell .ao-drift-indicator {
        flex: 0 0 auto;
      }
      .ao-drift-tag.ao-drift-tag--icon,
      .ao-drift-tag.ao-drift-tag--conf,
      .ao-drift-icon-wrap .ao-drift-tag {
        min-width: 20px;
        padding: 3px 4px;
      }

      #strydRunAnalysisSection .activity-overview-table {
        width: 100%;
        table-layout: auto;
      }

      #biomechanicalProfileSection > div:first-child {
        align-items: stretch !important;
      }
      .bio-controls-wrap {
        align-items: stretch !important;
      }
      .bio-profile-controls {
        width: 100%;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
        margin-top: 2px !important;
      }
      .bio-cg-wrap .bio-cg-col--sep:first-child {
        grid-column: 1 / -1;
      }
      .bio-compare-controls,
      .frp-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
      }

      /* Compare controls: 2-col layout matching the primary grid */
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
      }
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }

      .bio-cg-col,
      .bio-cg-col--sep,
      .bio-compare-controls .bio-cg-col,
      .frp-control-group,
      .frp-control-group--runs {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .bio-cg-wrap .bio-cg-col:last-child,
      .bio-compare-controls .bio-cg-col:last-child,
      .frp-controls-grid .frp-control-group:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
      }

      /* Hide divider under Shoe column in biomech controls */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      /* Vertically centre the Runs count relative to the Shoe button */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Same treatment for compare controls: hide Shoe's bottom border, centre Runs */
      #bioCompareControls .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }
      #bioCompareControls .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .bio-date-inputs {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
        width: 100%;
      }
      #biomechanicalProfileSection .bio-date-shell,
      #biomechanicalProfileSection .bio-select-shell,
      #bioCompareControls .bio-date-shell,
      #bioCompareControls .bio-select-shell,
      #frpShoeSelect {
        width: 100% !important;
        min-height: 34px !important;
      }
      #biomechanicalProfileSection .bio-date-display,
      #biomechanicalProfileSection .bio-period-select,
      #bioCompareControls .bio-date-display,
      #bioCompareControls .bio-period-select,
      #frpShoeSelect {
        font-size: 12px !important;
      }
      #biomechanicalProfileSection .drift-chart-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] {
        width: 100%;
        margin-left: 0;
      }
      #biomechanicalProfileSection .bio-slider-runs-dots {
        width: 100%;
        margin-left: 0;
      }

      #envelopeMetricTabs,
      #envelopeAxisTabs,
      #envelopeFilterBar {
        display: flex;
        flex-wrap: wrap !important;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 0;
      }
      #envelopeMetricTabs > *,
      #envelopeAxisTabs > *,
      #envelopeFilterBar > * {
        flex: 0 0 auto;
      }
      #shoeUseCaseTabs {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
        -webkit-overflow-scrolling: auto;
        scrollbar-width: none;
        gap: 8px;
        margin: 0;
        padding: 0;
      }
      .env-tab-btn,
      .use-case-btn {
        min-height: 34px;
      }

      .fr-bottom-row {
        flex-direction: column;
        gap: 12px;
      }
      .fr-bottom-matrix-card,
      .fr-bottom-lpi-card {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100%;
      }
      .rmt-scroll-shell {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
      }
      .rmt-scroll-shell .resilience-matrix-table {
        min-width: 420px;
      }
      .resilience-matrix-table th,
      .resilience-matrix-table .rmt-row-label {
        font-size: 0.6rem;
      }
      .rmt-cell {
        min-width: 86px;
      }

      .mobile-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
        touch-action: pan-x pan-y;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
      }
      .mobile-chart-stage {
        height: 100%;
      }
      .mobile-chart-stage--bio,
      .mobile-chart-stage--envelope {
        min-width: 620px;
      }
      .mobile-fullbleed-chart-card--frp .mobile-chart-stage--envelope {
        min-width: 0;
        width: 100%;
      }
      .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
      }
      .mobile-chart-stage canvas {
        display: block;
        width: 100% !important;
        height: 100% !important;
      }
      .drift-chart-container {
        height: 248px !important;
      }
      .mobile-fullbleed-chart-card .drift-chart-container {
        height: 272px !important;
      }
      .mobile-fullbleed-chart-card--inspector .drift-chart-container {
        height: 300px !important;
      }
      .di-elev-gps-row .drift-chart-container,
      .drift-inspector-charts .di-elev-gps-row .drift-chart-container {
        height: 208px !important;
      }

      .drift-chart-container.chart-mobile-landscape {
        height: auto !important;
        aspect-ratio: var(--chart-mobile-aspect-ratio, 1.72);
        min-height: var(--chart-mobile-min-height, 176px);
        max-height: var(--chart-mobile-max-height, 210px);
      }

      #driftInspectorSection .drift-inspector-main-card > .drift-chart-container {
        width: 100%;
        padding: 0;
      }
      #driftInspectorSection .mobile-chart-scroll {
        overflow-x: hidden;
        padding-bottom: 0;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        touch-action: pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll canvas {
        touch-action: pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll.is-zoomed {
        overflow-x: auto;
        touch-action: pan-x pan-y;
      }
      #driftInspectorSection .mobile-chart-scroll.is-zoomed canvas {
        touch-action: pan-x pan-y;
      }
      #driftInspectorSection .mobile-chart-stage {
        width: 100%;
        min-width: 0;
      }

      .drift-chart-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .drift-chart-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
        min-width: 0;
      }
      .drift-window-controls {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "save reset"
          "nudge view"
          "zoom zoom";
        gap: 8px;
        align-items: stretch;
      }
      .dw-nudge-wrap {
        grid-area: nudge;
        width: 100%;
        min-height: 38px;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid rgba(46, 209, 244, 0.18);
        background: rgba(8, 145, 178, 0.08);
        min-width: 0;
      }
      .dw-view-wrap {
        min-height: 38px;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 8px;
        border-radius: 10px;
        border: 1px solid rgba(46, 209, 244, 0.18);
        background: rgba(8, 145, 178, 0.08);
        min-width: 0;
      }
      .dw-view-label {
        flex: 1 1 auto;
        padding-right: 0;
        min-width: 0;
      }
      .dw-nudge-label {
        flex: 1 1 auto;
        padding-right: 0;
        min-width: 0;
      }
      .dw-nudge-btn,
      .drift-window-save-btn,
      .drift-window-reset-btn,
      .drift-chart-reset {
        min-height: 38px;
        padding: 8px 12px;
      }
      .dw-nudge-btn {
        width: 34px;
        min-width: 34px;
        height: 30px;
        padding: 0;
      }
      #dwViewWrap { grid-area: view; display: inline-flex; }
      #dwSaveBtn { grid-area: save; }
      #dwResetWrap { grid-area: reset; }
      #driftInspectorResetZoom {
        grid-area: zoom;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        max-height: 0;
        min-height: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        transform: translateY(-6px);
        transition: opacity 180ms ease, transform 180ms ease, max-height 220ms ease, padding 220ms ease, visibility 0s linear 220ms;
      }
      #driftInspectorResetZoom.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 60px;
        min-height: 38px !important;
        padding-top: 8px;
        padding-bottom: 8px;
        transform: translateY(0);
        transition: opacity 180ms ease, transform 180ms ease, max-height 220ms ease, padding 220ms ease;
      }
      .dw-reset-wrap,
      .dw-reset-trigger,
      .drift-window-save-btn,
      .drift-chart-reset {
        width: 100%;
        min-width: 0;
      }
      .drift-window-controls > * {
        min-width: 0;
      }
      .drift-window-save-btn,
      .dw-reset-wrap,
      #driftInspectorResetZoom {
        flex: 1 1 calc(50% - 4px);
      }
      .dw-reset-wrap {
        min-width: 0;
      }
      .dw-reset-trigger {
        width: 100%;
        justify-content: center;
      }
      .drift-window-save-btn,
      .drift-chart-reset {
        min-height: 40px;
        justify-content: center;
      }
      .dw-reset-menu {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        margin-top: 0;
        min-width: 0;
      }

      .di-dropdown-menu {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 8px;
        max-height: min(42vh, 280px);
      }

      .di-dropdown-trigger,
      .di-dropdown-item {
        font-size: 0.78rem;
      }

      .di-gps-map-card {
        min-height: 240px;
      }
    }
    @media (max-width: 640px) {
      .bio-section-intro {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px 0 12px;
      }
      .bio-section-intro .drift-shell-copy {
        display: none !important;
      }
      .bio-section-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin: 0;
      }
      .frp-section-intro {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 8px;
      }
      .frp-section-intro .drift-shell-copy {
        display: none !important;
      }
      .frp-section-actions {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0;
      }
      #driftInspectorSection > .drift-shell-copy {
        display: none !important;
      }

      #driftInspectorSection > .di-dropdown-wrap {
        margin-top: 16px;
      }
      .frp-section-actions .bio-select-shell {
        min-width: 0;
        width: 100%;
      }
      .frp-section-actions .bio-shoe-select {
        width: 100%;
        min-width: 0;
      }
      .bio-cg-wrap {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
        margin-top: 2px !important;
      }
      .bio-cg-wrap .bio-cg-col--sep:first-child {
        grid-column: 1 / -1;
      }
      .bio-compare-controls,
      .frp-controls-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
      }

      /* Compare controls: 2-col layout matching the primary grid */
      .bio-compare-controls {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px 10px !important;
        padding: 6px 8px !important;
      }
      #bioCompareControls .bio-cg-col:first-child {
        grid-column: 1 / -1;
      }

      .bio-cg-col,
      .bio-cg-col--sep,
      .bio-compare-controls .bio-cg-col,
      .frp-control-group,
      .frp-control-group--runs {
        width: 100%;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 0 6px 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.07);
      }
      .bio-cg-wrap .bio-cg-col:last-child,
      .bio-compare-controls .bio-cg-col:last-child,
      .frp-controls-grid .frp-control-group:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
      }

      /* Hide divider under Shoe column in biomech controls */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }

      /* Vertically centre the Runs count relative to the Shoe button */
      #biomechanicalProfileSection .bio-cg-wrap .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      /* Same treatment for compare controls: hide Shoe's bottom border, centre Runs */
      #bioCompareControls .bio-cg-col--sep:nth-child(2) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
      }
      #bioCompareControls .bio-cg-col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .bio-date-inputs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 6px;
      }
      #biomechanicalProfileSection .bio-date-shell,
      #biomechanicalProfileSection .bio-select-shell,
      #bioCompareControls .bio-date-shell,
      #bioCompareControls .bio-select-shell,
      .frp-section-actions .bio-select-shell {
        width: 100% !important;
        min-height: 34px !important;
      }
      #biomechanicalProfileSection .bio-date-display,
      #biomechanicalProfileSection .bio-period-select,
      #bioCompareControls .bio-date-display,
      #bioCompareControls .bio-period-select,
      #frpShoeSelect {
        font-size: 12px !important;
      }

      #envelopeRunsControls {
        min-width: 0 !important;
        padding-left: 0 !important;
      }

      #envelopeRunsPillsRow .drift-filter-bar {
        justify-content: flex-start;
      }

      .env-tab-btn,
      .use-case-btn {
        font-size: 0.65rem;
        padding: 5px 7px;
        gap: 3px;
      }
      .use-case-btn svg {
        width: 12px;
        height: 12px;
      }
      #shoeUseCaseTabs .use-case-btn {
        font-size: 12px !important;
      }
      #shoeUseCaseTabs {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        gap: 8px;
      }
      #shoeUseCaseTabs .use-case-btn {
        max-width: 100%;
      }
      .shoe-use-case-card {
        padding: 14px 14px 12px !important;
        gap: 10px;
      }
      .shoe-use-case-entitlements {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: -4px;
      }
      .shoe-use-case-entitlement {
        padding: 9px 10px;
      }
      .shoe-use-case-section {
        padding: 9px;
        gap: 7px;
      }
      .shoe-use-case-section-title {
        font-size: 0.58rem;
      }

      .bio-metrics-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 0.25rem;
      }
      .resilience-summary-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .resilience-summary-card {
        min-width: 0;
        padding: 14px 16px;
      }
      .resilience-summary-card .rsc-sub {
        display: none;
      }
      .resilience-summary-card .rsc-value .rsc-value-tooltip-mobile {
        display: inline-flex;
      }
      .frp-bottom-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .frp-secondary-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        box-sizing: border-box;
      }
      .frp-secondary-card > div:first-child,
      .frp-secondary-card > h5,
      .frp-secondary-card > p {
        padding-left: 0;
        padding-right: 0;
      }
      .resilience-matrix-table {
        table-layout: fixed;
        border-spacing: 3px;
      }
      .resilience-matrix-table th,
      .resilience-matrix-table .rmt-row-label {
        font-size: 0.56rem;
        padding: 3px 4px;
      }
      .rmt-cell {
        min-width: 0;
        padding: 8px 4px;
        font-size: 0.73rem;
      }
      .drift-chart-card {
        margin-left: 0;
        margin-right: 0;
        border-radius: 14px;
        padding: 14px 16px;
      }
      .drift-chart-card.mobile-fullbleed-chart-card,
      .mobile-fullbleed-chart-card--frp,
      .mobile-fullbleed-chart-card--inspector {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 4px !important;
      }

      #biomechanicalProfileSection .mobile-fullbleed-chart-card > h5 {
        display: block !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
      }

      #bioCompareControls.bio-compare-controls--visible + .mobile-fullbleed-chart-card {
        margin-top: 16px !important;
      }

      .mobile-fullbleed-chart-card > h5 {
        margin-bottom: 2px !important;
        font-size: 0.92rem !important;
      }

      .mobile-fullbleed-chart-card > h5,
      .mobile-fullbleed-chart-card > .drift-chart-toolbar,
      .mobile-fullbleed-chart-card > .drift-timeline-head,
      .mobile-fullbleed-chart-card > .frp-controls-grid,
      .mobile-fullbleed-chart-card > #envelopeSummaryStrip,
      .mobile-fullbleed-chart-card > .drift-chart-hint,
      .mobile-fullbleed-chart-card > .drift-response-strip {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      .mobile-fullbleed-chart-card .drift-chart-container {
        width: calc(100% + 1.5rem);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0;
      }
      /* Biomech chart: match metric card width, not full-bleed */
      #biomechanicalProfileSection .drift-chart-container {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] {
        width: 100%;
        margin-left: 0;
      }
      #biomechanicalProfileSection .bio-slider-runs-dots {
        width: 100%;
        margin-left: 0;
      }

      .mobile-chart-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        width: 100%;
        max-width: 100%;
      }

      .mobile-chart-stage--drift-main {
        min-width: 0;
        width: 100%;
      }

      .drift-chart-container {
        height: 248px !important;
      }

      .mobile-fullbleed-chart-card .drift-chart-container {
        height: 272px !important;
      }
      .bio-bracket-slider-wrap {
        padding: 14px 0 2px;
        overflow: visible;
      }
      .bio-pace-overlay {
        height: 20px;
      }
      .bio-pace-label {
        top: 8px;
        font-size: 6.5px;
        transform: translateX(-50%) rotate(-63deg);
      }
      .bio-bracket-slider-wrap input[type=range] {
        width: calc(100% + 22px);
        margin-left: -11px;
        height: 12px;
      }
      .bio-slider-runs-dots {
        width: calc(100% + 22px);
        margin-left: -11px;
      }
      .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        margin-top: -9px;
      }
      .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb {
        width: 28px;
        height: 28px;
      }
      .bio-slider-label {
        margin-top: 10px;
        font-size: 0.9rem;
      }
    }
/* === End Stryd-specific CSS === */

/* Profile motion and distribution alignment parity with Garmin. */
#biomechanicalProfileSection { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.bio-metric-card { transition: opacity .16s ease-out, transform .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out; }
.bio-expand-arrow { transition: transform .16s ease-out; }
.bio-explanation-container { transition: opacity .18s ease-out; }
#bioExplanationContainer h3 { animation: none !important; }
.bio-explanation-box { transition: transform .18s ease-out, opacity .18s ease-out; }
#bioExplTriangle { transition: transform 140ms cubic-bezier(.2,.7,.2,1); will-change: transform; }
.bio-expl-anim { animation: bioPanelRise .18s cubic-bezier(.16,1,.3,1); }
.bio-expl-hero, .bio-expl-content { transition: opacity .16s ease-out, transform .16s ease-out; }
.bio-overview-bar-fill { transition: none; will-change: opacity, transform; }
.bio-overview-bars { grid-template-rows: repeat(4, auto); align-items: stretch; }
.bio-overview-bar-col { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; justify-items: center; align-items: start; }

/* Compact phone signature, as on production and on the Garmin/Apple/Strava page: a thin
   pace slider inside a 44px touch target, and small flat metric cards four to a row
   (CAD LPI GCT DF / VO VR LSS ILR). Cards production does not have (the LPI comparison
   cards and HR effort context) follow on a row of their own. */
@media (max-width: 640px) {
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range] { display: block; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-runnable-track { height: 3px; border: 0; background: rgba(84, 220, 247, 0.3); box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-track { height: 3px; border: 0; background: rgba(84, 220, 247, 0.3); box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-progress { background: transparent; box-shadow: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7.5px; border-width: 1.5px; box-shadow: none; transform: none; }
  #biomechanicalProfileSection .bio-bracket-slider-wrap input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-width: 1.5px; box-shadow: none; transform: none; }

  #biomechanicalProfileSection .bio-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; margin-top: 0.9rem; }
  #biomechanicalProfileSection .bio-metrics-grid.bio-compare-metrics-row { margin-top: 0.35rem; padding: 0; border: 0; background: transparent; }
  #biomechanicalProfileSection .bio-metrics-grid > .bio-metric-card:is([data-bio-metric="hr"], [data-profile-skel-metric="hr"]) { grid-column: span 2; }
  #biomechanicalProfileSection .bio-metric-card { min-width: 0; min-height: 4.25rem; padding: 0.3rem 0.06rem; border-width: 1px !important; border-radius: 8px; background: #141925 !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; }
  #biomechanicalProfileSection .bio-card-glow,
  #biomechanicalProfileSection .bio-card-accent,
  #biomechanicalProfileSection .bio-card-badge,
  #biomechanicalProfileSection .bio-expand-arrow,
  #biomechanicalProfileSection .bio-card-title-row .bio-runit-circle--compact { display: none !important; }
  #biomechanicalProfileSection .bio-card-label-full { display: none; }
  #biomechanicalProfileSection .bio-card-label-compact { display: inline; }
  #biomechanicalProfileSection .bio-card-inner { gap: 0; }
  #biomechanicalProfileSection .bio-card-inner h3 { font-size: 14px !important; line-height: 1.2; font-weight: 500; letter-spacing: 0.01em; margin: 0 0 5px !important; }
  #biomechanicalProfileSection .bio-card-inner p { line-height: 1.2; white-space: nowrap; }
  #biomechanicalProfileSection .bio-card-inner .bio-card-value { font-size: 18px !important; }
  #biomechanicalProfileSection .bio-card-inner .bio-card-unit { font-size: 8px !important; }
  #biomechanicalProfileSection .bio-card-unavailable-note { margin-top: -3px; font-size: 8px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
  #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) { opacity: .4 !important; border-color: rgba(148,163,184,.3) !important; }
  #biomechanicalProfileSection .bio-metrics-grid.has-active .bio-metric-card:not(.bio-active) .bio-card-value { color: #94a3b8 !important; }

  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-metric-card { min-height: 88px; padding: 8px 4px; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-card-inner p { font-size: 18px !important; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-card-unit { font-size: 9px !important; }
  #biomechanicalProfileSection #bioCompareMetricsGrid .bio-compare-card-delta { display: block !important; min-height: 0.32rem; margin-top: 5px !important; font-size: 11px !important; font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: normal; }

  #biomechanicalProfileSection .bio-overview-bars { width: 100%; box-sizing: border-box; margin-inline: auto; }
  #biomechanicalProfileSection .bio-overview-bar-col { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); justify-items: center; box-sizing: border-box; }
  #biomechanicalProfileSection .bio-overview-bar-track { box-sizing: border-box; width: 30px; min-width: 30px; max-width: 30px; height: 70px; }
}

/* Keep the moving metric pointer on a compositor-friendly surface. */
#biomechanicalProfileSection #bioExplTriangle { filter: none; }
@media (prefers-reduced-motion: reduce) {
  #biomechanicalProfileSection #bioExplTriangle { transition: none; }
}

/* Included runs of a distribution bar: a centered panel over a blurred backdrop (the
   app's tooltip look on phones), opened by selecting the bar. */
.bio-runs-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: rgba(2, 6, 23, 0.46);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bio-runs-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  width: min(92vw, 360px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 12px;
  border-radius: 16px;
  background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97));
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.15), 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  outline: none;
}
.bio-runs-sheet[hidden],
.bio-runs-sheet-backdrop[hidden] {
  display: none;
}
.bio-runs-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bio-runs-sheet-title {
  margin: 0;
  color: #2ed1f4;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.bio-runs-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -8px -10px -8px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.bio-runs-sheet-close:hover,
.bio-runs-sheet-close:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.bio-runs-sheet-sub {
  margin: 4px 0 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.4;
}
.bio-runs-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bio-runs-sheet-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
  line-height: 1.35;
}
.bio-runs-sheet-list li:first-child {
  border-top: 0;
}
.bio-runs-sheet-list li span:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-variant-numeric: tabular-nums;
}