/* Carbon-arena palette from the v0703 result/poster design language:
         chalk text on near-black, one hot ramp (orange -> magenta) for speed,
         gold for station badges. Independent of the marketing styles.css. */
      :root {
        color-scheme: dark;
        --bg: #08080a;
        --card: #17171a;
        --card-2: #1c1c1e;
        --chalk: #f5f3ef;
        --muted: rgba(245, 243, 239, 0.55);
        --quiet: rgba(245, 243, 239, 0.38);
        --line: rgba(245, 243, 239, 0.12);
        --orange: #fb923c;
        --hot: #f0566b;
        --hot-soft: #fb9e6b;
        --gold: #fbbf24;
        --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
      }
      * { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; }
      body {
        min-height: 100vh;
        background:
          radial-gradient(130% 40% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
          linear-gradient(180deg, #0c0c0f 0%, #08080a 55%, #0a0708 100%);
        color: var(--chalk);
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter,
          "PingFang SC", "Segoe UI", sans-serif;
        -webkit-font-smoothing: antialiased;
        line-height: 1.5;
      }
      a { color: inherit; }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 22px;
        background: rgba(8, 8, 10, 0.6);
        border-bottom: 1px solid rgba(245, 243, 239, 0.08);
        backdrop-filter: blur(20px) saturate(1.5);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
      }
      .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; text-decoration: none; letter-spacing: -0.01em; }
      .brand .logo { width: 22px; height: 22px; border-radius: 6px; background: url("/assets/hyfit-icon-small.png") center / cover no-repeat; box-shadow: 0 0 0 1px rgba(245, 243, 239, 0.14); }
      .brand .fit { font-style: normal; color: var(--orange); }
      .brand .dot { color: var(--muted); font-weight: 600; }
      .site-header .back { font-size: 13px; color: var(--muted); text-decoration: none; }
      .site-header .back:hover { color: var(--chalk); }
      .site-header .hdr-right { display: flex; align-items: center; gap: 12px; }

      main { max-width: 620px; margin: 0 auto; padding: 34px 20px 90px; }

      /* vertical spine — the insider mark from the poster */
      .spine { position: fixed; left: 10px; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; }
      .spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; font-weight: 700; letter-spacing: 0.42em; color: rgba(245, 243, 239, 0.2); font-family: var(--mono); }
      @media (max-width: 760px) { .spine { display: none; } }

      .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.34em; color: var(--quiet); font-family: var(--mono); }
      h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; }
      .lead { color: var(--muted); font-size: 14.5px; margin-top: 12px; max-width: 46ch; }

      /* search panel + dropdown (mobile hyrox-search parity) */
      .search-panel {
        margin-top: 26px;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
      }
      .search-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        min-height: 52px;
      }
      .search-row svg { flex: none; color: var(--quiet); }
      .search-row input {
        flex: 1;
        min-width: 0;
        height: 52px;
        padding: 0;
        background: transparent;
        color: var(--chalk);
        border: 0;
        font-size: 16px;
        font-family: inherit;
        outline: none;
      }
      .search-row input::placeholder { color: var(--quiet); }
      /* Custom clear button only — hide WebKit's native search cancel. */
      .search-row input[type="search"]::-webkit-search-cancel-button,
      .search-row input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
      }
      .search-row .clear-btn,
      .search-row .spin {
        flex: none;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        background: none;
        border: 0;
        color: var(--quiet);
        cursor: pointer;
        font-family: inherit;
        font-size: 18px;
        line-height: 1;
      }
      .panel-divider { height: 1px; background: var(--line); }
      .dropdown { display: flex; flex-direction: column; }
      .athlete-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 44px;
        padding: 0 14px;
        background: none;
        border: 0;
        color: var(--chalk);
        font-family: inherit;
        font-size: inherit;
        text-align: left;
        cursor: pointer;
      }
      .athlete-row:hover,
      .athlete-row.selected { background: rgba(255, 255, 255, 0.05); }
      .athlete-row .icon {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        color: var(--muted);
        font-size: 14px;
      }
      .athlete-row .nm {
        flex: 1;
        min-width: 0;
        font-size: 15px;
        font-weight: 650;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .athlete-row .count {
        flex: none;
        font-size: 13px;
        color: var(--muted);
        white-space: nowrap;
      }
      .dropdown-empty {
        padding: 14px;
        color: var(--muted);
        font-size: 13.5px;
      }

      .status { margin-top: 18px; color: var(--muted); font-size: 13.5px; }
      .status.error { color: var(--hot); }

      .race-section { margin-top: 28px; }
      .race-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .race-header h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 750;
        letter-spacing: -0.02em;
      }
      .race-header p {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
      }
      .race-header .switch-btn {
        flex: none;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
        font-family: inherit;
        cursor: pointer;
      }
      .race-header .switch-btn:hover { color: var(--chalk); }
      .year-label {
        margin: 16px 0 8px;
        font-size: 12px;
        font-weight: 700;
        color: var(--quiet);
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .hrow {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        margin-bottom: 7px;
        padding: 14px 16px;
        background: #17171a;
        border: 1px solid rgba(245, 243, 239, 0.08);
        border-radius: 14px;
        color: var(--chalk);
        font-family: inherit;
        font-size: inherit;
        text-align: left;
        cursor: pointer;
      }
      .hrow:hover { border-color: rgba(251, 146, 60, 0.35); }
      .hrow .main { flex: 1; min-width: 0; }
      .hrow .title {
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hrow .meta {
        margin-top: 5px;
        font-size: 12px;
        font-weight: 600;
        color: rgba(245, 243, 239, 0.52);
      }
      .hrow .partner {
        margin-top: 3px;
        font-size: 12px;
        color: rgba(245, 243, 239, 0.42);
      }
      .hrow .perf {
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
      }
      .hrow .perf .tm {
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 800;
        color: #e8c4a8;
      }
      .hrow .chev {
        flex: none;
        margin-top: 4px;
        color: var(--quiet);
        font-size: 17px;
      }

      .crumb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font-size: 13.5px; font-family: inherit; cursor: pointer; padding: 0; }
      .crumb:hover { color: var(--chalk); }

      /* ── result view ─────────────────────────────────────────────── */
      .rtitle { margin-top: 26px; }
      .rtitle .ev { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; }
      .rtitle .ev .yr { color: var(--quiet); font-weight: 600; }
      .rtitle .meta { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }

      .rhero { margin: 22px 2px 4px; }
      .rhero small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
      .rhero .big { font-size: 62px; font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
      .rstats { display: flex; gap: 32px; margin: 18px 2px 26px; }
      .rstats .k { font-size: 12px; color: var(--muted); }
      .rstats .v { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
      .rstats .v em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }

      .seclbl { font-size: 12px; font-weight: 600; color: var(--muted); margin: 18px 2px 9px; }
      .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
      .tile { background: var(--card-2); border-radius: 14px; padding: 12px 12px; }
      .tile .tt { font-size: 10.5px; color: var(--muted); }
      .tile .v { font-size: 18px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
      .tile .v small { font-size: 10.5px; color: var(--muted); font-weight: 600; }

      .card { background: var(--card-2); border-radius: 18px; padding: 14px; margin-top: 12px; }
      .card .vh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
      .card .vt { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
      .card .vs { font-size: 10.5px; color: var(--quiet); }
      .rradar { display: flex; justify-content: center; }
      .rradar svg { width: 340px; max-width: 100%; display: block; }
      .cprofile svg { width: 100%; height: 130px; display: block; }
      .cpleg { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 10px; font-weight: 700; color: var(--muted); }
      .cpleg i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 5px; vertical-align: -1px; }

      .rhead { display: flex; align-items: center; padding: 2px 10px 8px; font-size: 11px; color: var(--quiet); }
      .rhead .h1 { flex: 1; } .rhead .h2 { width: 64px; text-align: right; } .rhead .h3 { width: 48px; text-align: right; }
      .rsplit { position: relative; display: flex; align-items: center; height: 32px; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.04); }
      .rsplit + .rsplit { margin-top: 5px; }
      .rsplit .fill { position: absolute; inset: 0 auto 0 0; }
      .rsplit .bdg { position: relative; z-index: 1; min-width: 23px; height: 17px; margin-left: 8px; border-radius: 5px; background: #0e0e10; color: var(--gold); font-size: 9.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
      .rsplit .bdg.run { background: transparent; color: transparent; }
      .rsplit .nm { position: relative; z-index: 1; flex: 1; margin-left: 9px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .rsplit .nm.run { color: rgba(235, 235, 245, 0.58); font-weight: 500; }
      .rsplit .tm { position: relative; z-index: 1; width: 64px; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
      .rsplit .pl { position: relative; z-index: 1; width: 48px; text-align: right; margin-right: 9px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
      .rtot { display: flex; align-items: center; padding: 11px 10px 0; margin-top: 6px; border-top: 1.5px solid rgba(255, 255, 255, 0.1); }
      .rtot .nm { flex: 1; font-size: 13px; font-weight: 700; color: var(--hot-soft); }
      .rtot .tm { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

      .appcta {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        margin-top: 26px; padding: 16px 18px;
        background: var(--card); border: 1px solid var(--line); border-radius: 18px;
      }
      .appcta .t { font-size: 14px; font-weight: 650; }
      .appcta .s { font-size: 12px; color: var(--muted); margin-top: 3px; }
      .appcta a { flex: none; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, #fb923c, #f0566b); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }

      /* Turnstile / rate-limit box */
      .gatebox { margin-top: 22px; padding: 18px; background: var(--card); border: 1px dashed rgba(245, 243, 239, 0.2); border-radius: 16px; }
      .gatebox p { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
      [hidden] { display: none !important; }

      footer { max-width: 620px; margin: 0 auto; padding: 0 20px 40px; color: var(--quiet); font-size: 11.5px; }
      footer a { color: var(--muted); }
.site-header .lang { font-size: 13px; color: var(--muted); text-decoration: none; margin-left: 12px; }
.site-header .lang:hover { color: var(--chalk); }
.lab-result-analysis .control-row { margin-top: 14px; }
.gap-chart { display: grid; gap: 5px; margin-top: 18px; }
.gap-row { display: grid; grid-template-columns: 108px 1fr 45px; gap: 8px; align-items: center; min-height: 23px; }
.gap-row > span { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.gap-row > b { text-align: right; font: 750 10px var(--mono); }
.gap-track { position: relative; height: 7px; border-radius: 999px; background: linear-gradient(90deg,rgba(86,200,178,.12) 0 49.6%,rgba(245,243,239,.2) 49.6% 50.4%,rgba(240,86,107,.12) 50.4%); }
.gap-track i { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
.gap-track i.cost { background: var(--hot); }.gap-track i.ahead { background: #56c8b2; }