:root {
      --bg: #f4f5f3;
      --panel: #ffffff;
      --panel-soft: #ecefeb;
      --ink: #161917;
      --muted: #697069;
      --line: #d8ddd6;
      --green: #1f6f5b;
      --green-dark: #164f42;
      --red: #b64036;
      --yellow: #d6a543;
      --blue: #456f9f;
      --shadow: 0 18px 48px rgba(21, 28, 24, 0.12);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .topbar {
      height: 72px;
      display: grid;
      grid-template-columns: 220px minmax(260px, 1fr) auto;
      gap: 18px;
      align-items: center;
      padding: 0 24px;
      border-bottom: 1px solid var(--line);
      background: rgba(244, 245, 243, 0.94);
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(14px);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .mark {
      width: 36px;
      height: 36px;
      border-radius: 7px;
      background:
        linear-gradient(135deg, transparent 39%, rgba(255,255,255,0.9) 40%, rgba(255,255,255,0.9) 46%, transparent 47%),
        linear-gradient(135deg, var(--green), var(--green-dark));
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
    }

    .brand-title {
      display: grid;
      gap: 1px;
    }

    .brand-title strong {
      font-size: 16px;
      line-height: 1.1;
    }

    .brand-title span {
      color: var(--muted);
      font-size: 12px;
    }

    .search {
      position: relative;
      display: grid;
      grid-template-columns: 24px 1fr auto;
      align-items: center;
      gap: 10px;
      max-width: 780px;
      height: 44px;
      padding: 0 12px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 8px 26px rgba(25, 33, 29, 0.06);
    }

    .search-icon {
      width: 16px;
      height: 16px;
      border: 2px solid var(--muted);
      border-radius: 50%;
      position: relative;
      justify-self: center;
    }

    .search-icon::after {
      content: "";
      width: 7px;
      height: 2px;
      background: var(--muted);
      position: absolute;
      right: -6px;
      bottom: -4px;
      transform: rotate(45deg);
      border-radius: 2px;
    }

    .search input {
      border: 0;
      outline: 0;
      min-width: 0;
      color: var(--ink);
      background: transparent;
    }

    .search .count {
      color: var(--muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .athlete-search-results {
      position: absolute;
      z-index: 40;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      display: grid;
      gap: 4px;
      max-height: min(440px, 70vh);
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 18px 44px rgba(25, 33, 29, 0.16);
    }

    .athlete-search-result {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-height: 48px;
      padding: 8px 10px;
      border: 0;
      border-radius: 7px;
      background: transparent;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }

    .athlete-search-result:hover,
    .athlete-search-result.active {
      background: #eef5f0;
    }

    .athlete-search-result > span {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .athlete-search-result strong,
    .athlete-search-result em,
    .athlete-search-result small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-search-result strong {
      font-size: 14px;
      line-height: 1.2;
    }

    .athlete-search-result em,
    .athlete-search-result small,
    .athlete-search-empty {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
    }

    .athlete-search-result small {
      max-width: 180px;
      justify-self: end;
    }

    .athlete-search-empty {
      padding: 12px;
      border: 1px dashed var(--line);
      border-radius: 7px;
      background: #fafbf9;
      font-weight: 750;
    }

    .top-actions {
      display: flex;
      gap: 8px;
      justify-content: end;
    }

    .icon-button,
    .text-button {
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--ink);
      border-radius: var(--radius);
      cursor: pointer;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      white-space: nowrap;
    }

    .icon-button {
      width: 40px;
      display: grid;
      place-items: center;
    }

    .text-button {
      padding: 0 14px;
      font-weight: 650;
    }

    .text-button.danger {
      color: var(--red);
      border-color: rgba(182, 64, 54, 0.35);
    }

    .watch-link {
      min-height: 28px;
      display: inline-grid;
      place-items: center;
      padding: 6px 9px;
      border-radius: 6px;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
    }

    .watch-link.secondary {
      background: var(--panel-soft);
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .auth-button.signed-in {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      max-width: 180px;
    }

    .avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--green);
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .auth-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .plus {
      width: 16px;
      height: 16px;
      position: relative;
    }

    .plus::before,
    .plus::after {
      content: "";
      position: absolute;
      background: var(--ink);
      border-radius: 2px;
      inset: 7px 0 auto 0;
      height: 2px;
    }

    .plus::after {
      transform: rotate(90deg);
    }

    .layout {
      display: grid;
      grid-template-columns: 248px minmax(420px, 1fr) 374px;
      gap: 20px;
      padding: 20px 24px 28px;
      align-items: start;
    }

    .filters,
    .detail {
      position: sticky;
      top: 92px;
    }

    .filters {
      display: grid;
      gap: 18px;
    }

    .filter-group {
      display: grid;
      gap: 10px;
    }

    .filter-head {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .segmented,
    .check-list {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 6px;
      display: grid;
      gap: 4px;
    }

    .segmented {
      max-height: min(58vh, 560px);
      overflow: auto;
      align-content: start;
    }

    .dynamic-filter-list {
      max-height: 240px;
      overflow: auto;
      align-content: start;
    }

    .segment,
    .check-row {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 10px;
      border-radius: 6px;
      color: var(--muted);
      font-size: 14px;
    }

    .segment {
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .segment span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .segment em {
      min-width: 22px;
      color: inherit;
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
      text-align: right;
      opacity: 0.78;
    }

    .segment.active {
      background: var(--green);
      color: #fff;
      font-weight: 700;
    }

    .check-row strong {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
    }

    .check-row span:last-child {
      flex: 0 0 auto;
    }

    button.check-row {
      width: 100%;
      border: 0;
      background: transparent;
      cursor: pointer;
      text-align: left;
    }

    .check-row span {
      font-size: 12px;
    }

    .fake-check {
      width: 15px;
      height: 15px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--panel-soft);
      flex: 0 0 auto;
    }

    .check-row.selected .fake-check {
      background: var(--green);
      border-color: var(--green);
      box-shadow: inset 0 0 0 3px #fff;
    }

    .empty-state {
      min-height: 220px;
      display: grid;
      place-items: center;
      padding: 28px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,0.6);
      color: var(--muted);
      text-align: center;
      line-height: 1.45;
    }

    .empty-state.compact {
      min-height: auto;
      place-items: start;
      padding: 14px;
      text-align: left;
    }

    .empty-state.compact strong {
      display: block;
      margin-bottom: 2px;
      color: var(--ink);
    }

    .main {
      display: grid;
      gap: 20px;
      min-width: 0;
    }

    .hero-strip {
      min-height: 260px;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) 300px;
      background: var(--ink);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .hero-media {
      background-image:
        linear-gradient(90deg, rgba(16, 18, 17, 0.22), rgba(16, 18, 17, 0.08)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
      min-height: 260px;
      position: relative;
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: auto 18px 18px 18px;
      height: 6px;
      background: rgba(255,255,255,0.28);
      border-radius: 999px;
      box-shadow: inset 230px 0 0 var(--red), inset 455px 0 0 rgba(255,255,255,0.28);
    }

    .hero-info {
      padding: 22px;
      color: #fff;
      display: grid;
      align-content: space-between;
      background: linear-gradient(145deg, rgba(31, 111, 91, 0.94), rgba(18, 23, 20, 0.98));
    }

    .hero-kicker {
      color: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .hero-info h1 {
      margin: 8px 0 8px;
      font-size: 32px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .hero-info p {
      margin: 0;
      color: rgba(255,255,255,0.78);
      font-size: 14px;
      line-height: 1.45;
    }

    .source-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 22px;
    }

    .source-pill {
      min-height: 30px;
      padding: 6px 9px;
      border-radius: 6px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      color: rgba(255,255,255,0.86);
      font-size: 12px;
      font-weight: 700;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    .section-head h2 {
      margin: 0;
      font-size: 20px;
      letter-spacing: 0;
    }

    .sort {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
    }

    .sort select {
      height: 34px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      color: var(--ink);
      padding: 0 28px 0 10px;
    }

    .match-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .match-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      display: grid;
      box-shadow: 0 10px 32px rgba(21, 28, 24, 0.08);
    }

    .thumb {
      min-height: 156px;
      background-image:
        linear-gradient(180deg, rgba(17, 19, 18, 0.06), rgba(17, 19, 18, 0.68)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: end;
      padding: 12px;
    }

    .thumb.alt-a {
      background-position: 38% 46%;
    }

    .thumb.alt-b {
      background-position: 62% 50%;
    }

    .thumb.alt-c {
      background-position: 48% 58%;
    }

    .play {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.38);
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(8px);
      position: relative;
      flex: 0 0 auto;
    }

    .play::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 12px;
      border-left: 12px solid #fff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }

    .duration {
      margin-left: auto;
      min-height: 26px;
      display: grid;
      place-items: center;
      padding: 0 8px;
      border-radius: 5px;
      color: #fff;
      background: rgba(13, 16, 15, 0.62);
      font-size: 12px;
      font-weight: 750;
    }

    .card-body {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .match-title {
      display: grid;
      gap: 4px;
    }

    .match-title strong {
      font-size: 16px;
      line-height: 1.2;
    }

    .match-title a {
      color: inherit;
      text-decoration: none;
    }

    .match-title a:hover {
      text-decoration: underline;
    }

    .match-title span {
      color: var(--muted);
      font-size: 13px;
    }

    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      min-height: 25px;
      padding: 5px 7px;
      border-radius: 5px;
      background: var(--panel-soft);
      color: #46504a;
      font-size: 12px;
      font-weight: 700;
    }

    .tag.warning-tag {
      background: #fff0d8;
      color: #7b4e12;
    }

    .source-summary {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .source-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .mini-bars {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 78px;
    }

    .mini-bars span {
      height: 6px;
      border-radius: 999px;
      background: var(--green);
      flex: 1;
    }

    .mini-bars span:nth-child(2) {
      background: var(--blue);
      flex: 0.72;
    }

    .mini-bars span:nth-child(3) {
      background: var(--yellow);
      flex: 0.48;
    }

    .detail {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .detail-video {
      min-height: 210px;
      background-image:
        linear-gradient(180deg, rgba(16, 18, 17, 0.08), rgba(16, 18, 17, 0.72)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
      position: relative;
      display: grid;
      place-items: center;
    }

    .detail-video .play {
      width: 54px;
      height: 54px;
    }

    .detail-video .play::after {
      left: 22px;
      top: 17px;
      border-left-width: 15px;
      border-top-width: 10px;
      border-bottom-width: 10px;
    }

    .detail-body {
      padding: 18px;
      display: grid;
      gap: 18px;
    }

    .match-status {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .status {
      min-height: 28px;
      padding: 6px 9px;
      border-radius: 6px;
      background: #dfebe5;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 800;
    }

    .detail h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.14;
    }

    .detail-meta {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .stat {
      min-height: 60px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
      display: grid;
      gap: 3px;
    }

    .stat span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .stat strong {
      font-size: 14px;
    }

    .sources {
      display: grid;
      gap: 10px;
    }

    #recentFootage {
      display: grid;
      gap: 10px;
    }

    .sources h3,
    .event-strip h3 {
      margin: 0;
      font-size: 14px;
      letter-spacing: 0;
    }

    .source-card {
      display: grid;
      grid-template-columns: 10px 1fr auto;
      gap: 10px;
      align-items: start;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .source-card.primary {
      border-color: rgba(31, 111, 91, 0.38);
      background: #f1f7f4;
    }

    .source-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      margin-top: 5px;
    }

    .source-card:nth-child(3) .source-dot {
      background: var(--blue);
    }

    .source-card:nth-child(4) .source-dot {
      background: var(--yellow);
    }

    .source-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .source-copy strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .source-copy span {
      color: var(--muted);
      font-size: 12px;
    }

    .source-time {
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .event-strip {
      display: grid;
      gap: 10px;
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: none;
      place-items: center;
      padding: 18px;
      background: rgba(16, 19, 17, 0.42);
    }

    .modal.open {
      display: grid;
    }

    .modal-panel {
      width: min(720px, 100%);
      max-height: min(760px, calc(100vh - 36px));
      overflow: auto;
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      border: 1px solid var(--line);
    }

    .modal-head,
    .modal-actions {
      min-height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
    }

    .modal-actions {
      border-top: 1px solid var(--line);
      border-bottom: 0;
      justify-content: end;
    }

    .modal-head h2 {
      margin: 0;
      font-size: 18px;
    }

    .modal-body {
      padding: 18px;
      display: grid;
      gap: 14px;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
      color: var(--ink);
      padding: 8px 10px;
      outline: 0;
    }

    .field textarea {
      min-height: 112px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.45;
    }

    .athlete-picker {
      position: relative;
    }

    .athlete-picker-selected {
      min-height: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .athlete-picker-selected span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      text-transform: none;
    }

    .athlete-picker-selected a {
      color: var(--green-dark);
      font-weight: 800;
      text-decoration: none;
    }

    .athlete-picker-selected a:hover {
      text-decoration: underline;
    }

    .athlete-picker-results {
      position: absolute;
      top: calc(100% - 2px);
      right: 0;
      left: 0;
      z-index: 20;
      display: grid;
      max-height: 280px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 18px 36px rgba(21, 28, 24, 0.16);
    }

    .athlete-picker-option {
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 9px 10px;
      border: 0;
      border-bottom: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
    }

    .athlete-picker-option:last-child {
      border-bottom: 0;
    }

    .athlete-picker-option:hover,
    .athlete-picker-option.selected {
      background: #eef6f1;
    }

    .athlete-picker-option strong {
      min-width: 0;
      overflow: hidden;
      font-size: 13px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-picker-option span {
      min-width: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.25;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
    }

    .auth-stack {
      display: grid;
      gap: 14px;
    }

    .notice {
      padding: 10px 12px;
      border-radius: var(--radius);
      background: #f5efe2;
      color: #6d5120;
      font-size: 13px;
      line-height: 1.45;
    }

    .signed-in-panel {
      display: none;
      gap: 12px;
      align-items: center;
      grid-template-columns: 42px minmax(0, 1fr);
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .signed-in-panel.visible {
      display: grid;
    }

    .signed-in-panel .avatar {
      width: 42px;
      height: 42px;
      font-size: 16px;
    }

    .signed-in-copy {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .signed-in-copy strong,
    .signed-in-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .signed-in-copy span {
      color: var(--muted);
      font-size: 13px;
    }

    .login-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: end;
    }

    .brand-link,
    .link-button,
    .inline-detail-link {
      color: inherit;
      text-decoration: none;
    }

    .inline-detail-link:hover {
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    .admin-title {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .admin-title strong {
      font-size: 16px;
      line-height: 1.1;
    }

    .admin-title span {
      color: var(--muted);
      font-size: 12px;
    }

    .admin-layout {
      padding: 24px;
      display: grid;
      gap: 20px;
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
    }

    .admin-panel,
    .admin-dashboard {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .admin-panel {
      min-height: 320px;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(320px, 420px);
      align-items: center;
      gap: 24px;
      padding: 24px;
    }

    .admin-panel h1,
    .admin-dashboard h1 {
      margin: 4px 0 8px;
      font-size: 30px;
      letter-spacing: 0;
    }

    .admin-panel p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .admin-login-form {
      display: grid;
      gap: 12px;
    }

    .admin-dashboard {
      display: none;
      gap: 18px;
      padding: 20px;
    }

    .admin-dashboard.visible {
      display: grid;
    }

    .hidden {
      display: none !important;
    }

    .admin-panel.hidden {
      display: none;
    }

    .admin-overview,
    .admin-detail {
      display: grid;
      gap: 18px;
    }

    .admin-integration-panel {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .integration-form {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .integration-actions {
      align-self: end;
      justify-content: flex-start;
      flex-wrap: nowrap;
    }

    .integration-note {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .admin-browser-tools {
      display: grid;
      grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(150px, 1fr));
      gap: 10px;
      align-items: end;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .admin-video-tools {
      grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(160px, 1fr));
    }

    .admin-browser-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .admin-jobs-panel {
      display: grid;
      gap: 12px;
    }

    .jobs-dashboard {
      max-width: 1440px;
    }

    .jobs-only-panel {
      display: grid;
      gap: 16px;
    }

    .agent-queue-panel {
      padding: 16px;
      background: #f7f9f6;
    }

    .job-queue-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .job-stat-card {
      display: grid;
      gap: 4px;
      min-height: 86px;
      align-content: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 8px 20px rgba(21, 28, 24, 0.05);
    }

    .job-stat-card span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .job-stat-card strong {
      font-size: 28px;
      line-height: 1;
    }

    .job-stat-card.is-queued {
      border-color: rgba(57, 93, 139, 0.24);
    }

    .job-stat-card.is-running {
      border-color: rgba(196, 123, 37, 0.28);
    }

    .job-stat-card.is-failed {
      border-color: rgba(182, 64, 54, 0.25);
    }

    .job-stat-card.is-workers {
      border-color: rgba(31, 111, 91, 0.25);
    }

    .job-queue-section {
      display: grid;
      gap: 10px;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .job-queue-section-head {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 10px;
    }

    .job-queue-section-head h2 {
      margin: 4px 0 0;
      font-size: 20px;
      line-height: 1.15;
    }

    .job-queue-section-head > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .job-queue-list-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: end;
      justify-content: space-between;
      padding: 10px;
      border: 1px solid rgba(30, 39, 34, 0.08);
      border-radius: 7px;
      background: #f7f9f6;
    }

    .job-queue-list-toolbar .field {
      flex: 1 1 280px;
    }

    .job-queue-toggle {
      min-height: 40px;
      align-items: center;
      margin-left: auto;
      white-space: nowrap;
    }

    .jobs-toolbar {
      align-items: end;
    }

    .field.compact-field {
      min-width: 180px;
    }

    .field.compact-field span {
      font-size: 11px;
    }

    .show-more-row {
      display: grid;
      place-items: center;
      padding: 4px 0 10px;
    }

    .detail-form,
    .detail-section {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .section-head.compact h2 {
      margin: 4px 0 0;
      font-size: 20px;
      letter-spacing: 0;
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: end;
      gap: 8px;
    }

    .linked-video-list {
      display: grid;
      gap: 10px;
    }

    .manual-footage-rows {
      display: grid;
      gap: 10px;
    }

    .manual-footage-row {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .manual-footage-row-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .manual-footage-row-head strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .manual-footage-row .text-button.danger {
      color: #8f2f2f;
    }

    .manual-footage-grid {
      display: grid;
      grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(100px, 1fr));
      gap: 10px;
      align-items: end;
    }

    .manual-footage-link {
      grid-column: 1 / -1;
    }

    .manual-footage-title {
      grid-column: 1 / -1;
    }

    .video-page-layout {
      max-width: 1280px;
    }

    .add-video-layout {
      max-width: 940px;
    }

    .video-add-preview {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .video-info-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.85fr);
      gap: 14px;
      align-items: start;
    }

    .video-source-card {
      display: grid;
      gap: 14px;
      min-width: 0;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.06);
    }

    .video-source-card:first-child {
      grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
      align-items: stretch;
    }

    .video-source-media {
      min-height: 220px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #eef2ee;
    }

    .video-source-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-source-media.empty {
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .video-source-copy {
      min-width: 0;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .video-source-copy h2 {
      margin: 4px 0 0;
      font-size: 28px;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .video-source-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
    }

    .video-source-copy .video-source-description {
      max-width: 72ch;
      color: var(--ink);
      font-weight: 600;
    }

    .video-source-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .video-source-chips span {
      max-width: 100%;
      min-height: 26px;
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fafbf9;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .video-source-actions {
      justify-content: start;
    }

    .video-info-list {
      display: grid;
      gap: 8px;
    }

    .video-info-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      align-items: baseline;
      min-width: 0;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }

    .video-info-row:last-child {
      border-bottom: 0;
    }

    .video-info-row span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .video-info-row strong,
    .video-info-row a {
      min-width: 0;
      color: var(--ink);
      font-size: 13px;
      font-weight: 750;
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .video-info-row a:hover {
      text-decoration: underline;
    }

    .video-raw-metadata textarea {
      min-height: 180px;
      resize: vertical;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.45;
    }

    .video-admin-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
      gap: 14px;
      align-items: start;
    }

    .video-admin-grid.public-view {
      grid-template-columns: 1fr;
    }

    .video-admin-card {
      display: grid;
      gap: 12px;
      min-width: 0;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.06);
    }

    .detail-form.compact {
      padding: 0;
      border: 0;
      background: transparent;
    }

    .video-footage-list {
      display: grid;
      gap: 12px;
    }

    .video-footage-card-list {
      display: grid;
      gap: 10px;
    }

    .video-footage-card {
      background: #fff;
    }

    .video-match-footage-timeline {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      padding: 12px;
    }

    .video-match-footage-timeline .match-segment.source-interval.partial,
    .video-match-footage-timeline .match-segment.source-interval.needs_review,
    .video-match-footage-timeline .match-segment.source-interval.interrupted {
      background: #5e6a72;
    }

    .match-page-layout {
      max-width: 1180px;
    }

    .match-page {
      display: none;
      gap: 16px;
    }

    .match-page.visible {
      display: grid;
    }

    .match-hero-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: end;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(250,251,249,0.94), rgba(239,245,241,0.98)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .match-hero-panel h1 {
      max-width: 840px;
      margin: 4px 0 8px;
      font-size: clamp(30px, 4.5vw, 52px);
      line-height: 0.98;
      letter-spacing: 0;
    }

    .match-hero-panel p {
      max-width: 820px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
    }

    .match-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
      gap: 16px;
      align-items: start;
    }

    .match-panel {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.06);
    }

    .match-athlete-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .match-athlete-card {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 3px 10px;
      align-items: center;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
      color: inherit;
      text-decoration: none;
    }

    .match-athlete-card:hover strong {
      text-decoration: underline;
    }

    .match-athlete-card.winner {
      border-color: rgba(48, 104, 79, 0.34);
      background: #eef6f1;
    }

    .match-athlete-card.winner .match-athlete-side {
      background: var(--green);
      color: #fff;
    }

    .match-athlete-side {
      grid-row: span 2;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
    }

    .match-athlete-card strong,
    .match-athlete-card em {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .match-athlete-card strong {
      font-size: 16px;
      line-height: 1.2;
    }

    .match-athlete-card em {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
    }

    .match-context-list {
      display: grid;
      gap: 8px;
    }

    .match-context-item {
      display: grid;
      gap: 4px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
    }

    .match-context-item > span,
    .match-context-item em {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      font-weight: 750;
    }

    .match-context-item strong,
    .match-context-item a,
    .match-context-item strong span {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.3;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .match-context-item a:hover {
      text-decoration: underline;
    }

    .match-footage-list {
      gap: 10px;
    }

    .match-footage-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
    }

    .match-footage-card > div:first-child {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .match-footage-card strong,
    .match-footage-card span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .match-footage-card > div:first-child > strong {
      font-size: 14px;
      line-height: 1.25;
    }

    .match-footage-card > div:first-child > span {
      color: var(--muted);
      font-size: 12px;
    }

    .match-footage-admin {
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .match-footage-admin-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .match-footage-link-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }

    .footage-timeline-panel {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .footage-timeline-scale,
    .footage-timeline-legend {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .footage-timeline-legend {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .footage-timeline-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .footage-timeline-legend i {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
    }

    .footage-timeline-legend .legend-source {
      background: #d7ebe4;
      border: 1px solid #7db29f;
    }

    .footage-timeline-legend .legend-match {
      background: #212121;
    }

    .footage-timeline-legend .legend-frame {
      background: #f4b84a;
    }

    .footage-timeline-track {
      position: relative;
      min-height: 78px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        repeating-linear-gradient(
          to right,
          #f9faf8,
          #f9faf8 0.5%,
          #fff 0.5%,
          #fff 10%
        );
      overflow: hidden;
    }

    .footage-interval-band,
    .footage-match-band {
      position: absolute;
      top: 16px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      padding: 0 8px;
      font-size: 11px;
      font-weight: 700;
      min-width: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .footage-interval-band {
      background: #d7ebe4;
      color: #173c31;
      border: 1px solid #7db29f;
    }

    .footage-match-band {
      top: 42px;
      background: #212121;
      color: #fff;
    }

    .footage-frame-point {
      position: absolute;
      bottom: 8px;
      width: 10px;
      height: 10px;
      transform: translateX(-50%);
      border: 0;
      border-radius: 999px;
      background: #f4b84a;
      box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.14);
    }

    .footage-frame-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }

    .footage-frame-card {
      display: grid;
      gap: 9px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      min-width: 0;
    }

    .footage-frame-card img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: #f3f4f2;
    }

    .footage-frame-card strong,
    .footage-frame-card span,
    .footage-frame-card em {
      display: block;
      min-width: 0;
    }

    .footage-frame-card span,
    .footage-frame-card em {
      color: var(--muted);
      font-size: 12px;
      overflow-wrap: anywhere;
    }

    .footage-frame-card pre {
      margin: 0;
      padding: 8px;
      max-height: 220px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #f7f8f6;
      font-size: 11px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .inline-notice {
      min-height: 0;
      padding: 8px 10px;
    }

    .match-footage-time {
      min-width: 116px;
      display: grid;
      gap: 2px;
      justify-items: end;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .match-footage-time strong {
      font-size: 18px;
      line-height: 1;
    }

    .match-footage-time span,
    .match-footage-time em {
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      font-weight: 750;
    }

    .match-footage-meta {
      grid-column: 1 / -1;
      justify-content: start;
    }

    .event-page-layout {
      max-width: 1320px;
    }

    .event-public-app {
      background: #e9edf2;
    }

    .event-public-topbar {
      display: flex;
      min-height: 66px;
      height: auto;
      justify-content: space-between;
      border-bottom-color: #d9dee6;
      background: rgba(255, 255, 255, 0.94);
    }

    .event-public-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin: 0 auto;
    }

    .event-public-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 8px;
      color: #3a4651;
      font-size: 13px;
      font-weight: 760;
      text-decoration: none;
    }

    .event-public-nav a.active {
      background: #eef2f5;
      color: #111419;
    }

    .event-page-title-compact,
    .event-page-status-compact {
      display: none;
    }

    .event-public-layout {
      width: min(1580px, calc(100% - 56px));
      margin: 34px auto 60px;
    }

    .event-public-page {
      display: none;
      overflow: hidden;
      min-height: 820px;
      border: 1px solid #d9dee6;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 18px 48px rgba(17, 24, 34, 0.13);
    }

    .event-public-page.visible {
      display: grid;
    }

    .event-public-intro {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      padding: 34px 38px 24px;
      background: #fff;
    }

    .event-public-intro h1 {
      margin: 4px 0 12px;
      color: #111419;
      font-size: clamp(38px, 5vw, 70px);
      line-height: 0.96;
      letter-spacing: 0;
    }

    .event-public-intro p {
      max-width: 760px;
      margin: 0;
      color: #646f7a;
      font-size: 18px;
      line-height: 1.45;
    }

    .tag.red {
      background: #ffe7ea;
      color: #8d1720;
    }

    .tag.blue {
      background: #e6f1fb;
      color: #164f83;
    }

    .tag.green {
      background: #e5f4ee;
      color: #19563f;
    }

    .tag.gold {
      background: #fff0d1;
      color: #7a4d0c;
    }

    .tag.purple {
      background: #eeecfb;
      color: #423886;
    }

    .breadcrumb-picker {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      gap: 8px;
      align-items: center;
      padding: 14px;
      border: 1px solid #d9dee6;
      border-radius: 8px;
      background: #fff;
    }

    .select-pill {
      min-width: 0;
      min-height: 52px;
      display: grid;
      gap: 3px;
      padding: 8px 10px;
      border: 1px solid #d9dee6;
      border-radius: 8px;
      background: #fbfcfd;
    }

    .select-pill span {
      display: block;
      color: #646f7a;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .select-pill select {
      min-width: 0;
      width: 100%;
      border: 0;
      outline: 0;
      background: transparent;
      color: #111419;
      font-size: 15px;
      font-weight: 850;
    }

    .event-bracket-open-cta {
      align-self: stretch;
      min-height: 52px;
      padding-inline: 16px;
      white-space: nowrap;
    }

    .event-bracket-open-cta.disabled {
      opacity: 0.5;
      pointer-events: none;
    }

    .event-category-panels {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 20px;
      align-items: start;
      padding-top: 18px;
    }

    .event-category-menu {
      align-content: start;
    }

    .event-category-menu .division-group-summary {
      align-items: baseline;
      padding: 0 2px 4px;
    }

    .event-category-menu .division-weight-grid,
    .event-category-menu .division-quick-row {
      grid-template-columns: 1fr;
    }

    .event-division-button.category {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 58px;
      padding: 12px;
      background: #fff;
    }

    .event-division-button.category.active {
      border-color: rgba(32, 95, 158, 0.45);
      background: #f4f9fe;
    }

    .event-division-button.category > div {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .event-selected-matches {
      display: grid;
      gap: 12px;
    }

    .match-shelf {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 12px;
    }

    .thumb-match {
      position: relative;
      overflow: hidden;
      display: grid;
      align-content: end;
      min-height: 208px;
      padding: 14px;
      border-radius: 8px;
      color: #fff;
      isolation: isolate;
      text-decoration: none;
    }

    .thumb-match.large {
      min-height: 258px;
    }

    .thumb-match::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background-image: url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: var(--pos, center);
      filter: saturate(0.96) contrast(1.05);
    }

    .thumb-match::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.78));
    }

    .thumb-match strong {
      display: block;
      margin: 8px 0 6px;
      color: #fff;
      font-size: 20px;
      line-height: 1.08;
    }

    .thumb-match.large strong {
      font-size: 28px;
    }

    .thumb-match .tiny {
      color: rgba(255, 255, 255, 0.76);
      font-size: 12px;
      font-weight: 720;
    }

    .event-hero-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: end;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(250,251,249,0.96), rgba(242,246,241,0.96)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
    }

    .event-hero-panel h1 {
      margin: 4px 0 6px;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1;
    }

    .event-hero-panel p {
      max-width: 760px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .event-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: end;
    }

    .event-public-overview {
      display: grid;
      grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.6fr);
      gap: 16px;
      align-items: stretch;
    }

    .event-facts-public {
      align-content: start;
    }

    .event-recommended-panel,
    .event-bracket-picker-panel,
    .event-match-library,
    .event-other-matches-section,
    .event-superfights-section {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.06);
    }

    .event-recommended-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .event-recommended-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 126px minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 10px 12px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafbf9;
    }

    .event-recommended-thumb {
      grid-row: 1 / span 2;
      min-height: 118px;
      border-radius: 7px;
      border: 1px solid rgba(30, 39, 34, 0.12);
      background:
        linear-gradient(180deg, rgba(18, 28, 23, 0.04), rgba(18, 28, 23, 0.22)),
        url("../assets/match-footage-hero.jpg");
      background-size: cover;
      background-position: center;
    }

    .event-recommended-thumb:hover {
      border-color: rgba(48, 104, 79, 0.42);
    }

    .event-recommended-copy {
      min-width: 0;
      display: grid;
      gap: 6px;
      align-content: start;
    }

    .event-recommended-copy > span {
      min-width: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .event-recommended-copy strong,
    .event-recommended-copy a {
      min-width: 0;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.2;
      text-decoration: none;
    }

    .event-recommended-copy a:hover {
      text-decoration: underline;
    }

    .event-recommended-tags,
    .event-recommended-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .event-recommended-actions {
      align-self: end;
      justify-content: end;
    }

    .event-bracket-picker-panel {
      grid-template-columns: 1fr;
      align-items: start;
      padding: 28px 32px 36px;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      background: #f4f6f8;
      box-shadow: none;
    }

    .event-bracket-picker-panel > .section-head {
      grid-column: 1 / -1;
    }

    .event-bracket-picker-panel .event-division-list {
      gap: 10px;
    }

    .event-bracket-crumbs {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafbf9;
    }

    .event-bracket-crumb {
      position: relative;
    }

    .event-bracket-crumb:not(:last-child)::after {
      content: "/";
      position: absolute;
      right: -8px;
      bottom: 8px;
      color: var(--muted);
      font-weight: 900;
    }

    .event-match-scope-row {
      padding-top: 2px;
    }

    .event-bracket-preview-shell {
      min-width: 0;
      display: grid;
      gap: 18px;
    }

    .event-bracket-preview-head {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: end;
      justify-content: space-between;
      min-height: 48px;
    }

    .event-bracket-preview-head h2 {
      margin: 0;
      font-size: 22px;
      line-height: 1.1;
    }

    .event-bracket-preview {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .event-bracket-preview-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafbf9;
    }

    .event-bracket-preview-top > div {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .event-bracket-preview-top strong {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: 15px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .event-bracket-preview-top span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .event-bracket-empty {
      min-height: 280px;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 8px;
      padding: 24px;
      border: 1px dashed rgba(30, 39, 34, 0.22);
      border-radius: 8px;
      background: #fafbf9;
      color: var(--muted);
      text-align: center;
    }

    .event-bracket-empty strong {
      color: var(--ink);
      font-size: 18px;
    }

    .event-compact-bracket-host.brk-compact {
      grid-template-rows: minmax(320px, 1fr);
      min-height: 320px;
      border-radius: 8px;
    }

    .event-compact-bracket-host .brk-compact-viewport {
      min-height: 320px;
    }

    .event-compact-bracket-host .brk-compact-card {
      box-shadow: 0 6px 15px rgba(33, 42, 37, 0.06);
    }

    .event-other-matches-section,
    .event-superfights-section {
      max-width: min(1180px, calc(100vw - 32px));
      width: 100%;
      margin: 0 auto 28px;
      padding: 22px;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      background: #fff;
      box-shadow: none;
    }

    .event-other-matches-section {
      margin-top: 26px;
    }

    .event-other-match-grid,
    .event-superfight-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 10px;
    }

    .event-other-match-card,
    .event-superfight-card {
      min-width: 0;
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafbf9;
    }

    .event-other-match-kicker,
    .event-superfight-kicker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      text-transform: uppercase;
    }

    .event-other-match-card h3,
    .event-superfight-card h3 {
      margin: 0;
      color: var(--ink);
      font-size: 18px;
      line-height: 1.15;
    }

    .event-other-match-card h3 a,
    .event-superfight-card h3 a {
      color: inherit;
      text-decoration: none;
    }

    .event-other-match-card h3 a:hover,
    .event-superfight-card h3 a:hover {
      text-decoration: underline;
    }

    .event-other-match-card p,
    .event-superfight-card p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .event-other-match-tags,
    .event-other-match-actions,
    .event-superfight-tags,
    .event-superfight-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .event-other-match-actions,
    .event-superfight-actions {
      justify-content: end;
    }

    .event-browser {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .event-browser-sidebar,
    .event-browser-main {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.06);
    }

    .event-division-list,
    .event-match-list {
      display: grid;
      gap: 8px;
    }

    .division-filter-panel {
      display: grid;
      gap: 8px;
    }

    .division-filter-field {
      display: grid;
      gap: 4px;
    }

    .division-filter-field span,
    .division-group-summary span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .division-filter-field select {
      width: 100%;
      min-height: 36px;
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      font: inherit;
    }

    .division-quick-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .division-group-summary {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding-top: 4px;
    }

    .division-group-summary strong {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 13px;
    }

    .division-weight-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .event-division-button {
      min-width: 0;
      display: grid;
      gap: 3px;
      width: 100%;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
      color: var(--ink);
      cursor: pointer;
      text-align: left;
    }

    .event-division-button.utility {
      background: #fff;
    }

    .event-division-button.weight {
      min-height: 64px;
    }

    .event-division-button.active {
      border-color: rgba(48, 104, 79, 0.42);
      background: #eef6f1;
    }

    .event-division-button strong {
      overflow-wrap: anywhere;
      font-size: 13px;
      line-height: 1.25;
    }

    .event-division-button span,
    .event-submeta {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .event-submeta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .event-match-browser {
      display: grid;
      gap: 10px;
    }

    .event-video-browser {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
    }

    .event-match-toolbar {
      display: grid;
      grid-template-columns: minmax(240px, 1fr);
      gap: 8px;
      align-items: end;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .event-match-filter.match-search {
      width: 100%;
      max-width: 720px;
    }

    .event-match-filter {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .event-match-filter span,
    .event-match-browser-summary span,
    .event-match-group-head span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      text-transform: uppercase;
    }

    .event-match-filter input,
    .event-match-filter select {
      width: 100%;
      min-height: 36px;
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      font: inherit;
    }

    .event-match-browser-summary {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 2px;
    }

    .event-match-browser-summary > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .event-match-browser-results {
      display: grid;
      gap: 8px;
    }

    .event-match-group {
      display: block;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .event-video-group .event-match-group-body {
      background: #fafbf9;
    }

    .event-video-row {
      box-shadow: none;
    }

    .event-match-group-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 24px;
      gap: 10px;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      list-style: none;
    }

    .event-match-group-head::-webkit-details-marker {
      display: none;
    }

    .event-match-group-head::before {
      content: "+";
      width: 20px;
      height: 20px;
      display: inline-grid;
      place-items: center;
      grid-row: 1;
      grid-column: 3;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .event-match-group[open] .event-match-group-head::before {
      content: "-";
    }

    .event-match-group-head > div:first-child {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .event-match-group-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: end;
      gap: 5px;
    }

    .event-match-group-head strong {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 13px;
    }

    .event-match-group-body {
      display: grid;
      gap: 8px;
      padding: 0 10px 10px;
    }

    .event-match-group-actions {
      display: flex;
      justify-content: end;
    }

    .event-match-group-note {
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.35;
    }

    .event-match-show-more {
      justify-self: center;
    }

    .division-placement-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 6px;
      width: 100%;
      margin-top: 4px;
    }

    .division-placement {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 2px 7px;
      align-items: baseline;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: inherit;
      text-decoration: none;
    }

    .division-placement:hover span {
      text-decoration: underline;
    }

    .division-placement strong {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-size: 12px;
      line-height: 1;
    }

    .division-placement span,
    .division-placement em {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .division-placement span {
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
    }

    .division-placement em {
      grid-column: 2;
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
    }

    .division-bracket-panel {
      display: grid;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fbfcfa;
    }

    .division-bracket-panel.empty {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      color: var(--muted);
    }

    .division-bracket-panel.empty strong {
      display: block;
      margin-top: 2px;
      color: var(--ink);
      font-size: 15px;
    }

    .division-bracket-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }

    .division-bracket-head h3 {
      margin: 2px 0 0;
      font-size: 18px;
      line-height: 1.2;
    }

    .division-bracket-scroll {
      overflow-x: auto;
      padding-bottom: 4px;
    }

    .division-bracket {
      min-width: max(720px, calc(var(--round-count, 3) * 240px));
      display: grid;
      grid-template-columns: repeat(var(--round-count, 3), minmax(220px, 1fr));
      gap: 12px;
      align-items: stretch;
    }

    .bracket-round {
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
    }

    .bracket-round-head {
      min-height: 42px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 8px;
      padding: 0 2px;
    }

    .bracket-round-head strong {
      font-size: 13px;
      line-height: 1.2;
    }

    .bracket-round-head span {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .bracket-round-bouts {
      display: grid;
      gap: 12px;
      align-content: space-around;
    }

    .bracket-bout {
      position: relative;
      display: grid;
      gap: 7px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      box-shadow: 0 8px 18px rgba(21, 28, 24, 0.05);
    }

    .bracket-bout.linked {
      border-color: rgba(48, 104, 79, 0.28);
    }

    .bracket-bout.has-gap {
      border-color: rgba(177, 126, 29, 0.34);
    }

    .bracket-bout.has-warning {
      border-color: rgba(142, 62, 62, 0.28);
    }

    .bracket-bout.bracket-unknown {
      border-color: rgba(30, 39, 34, 0.16);
      border-style: dashed;
      background: #fbfcfa;
      box-shadow: none;
    }

    .bracket-bout.bracket-unknown .bracket-side {
      border-style: dashed;
      background: #fff;
    }

    .bracket-bout.bracket-unknown .bracket-side span {
      color: var(--muted);
      font-weight: 700;
    }

    .bracket-bout.bracket-closeout {
      border-color: rgba(48, 104, 79, 0.42);
      background: linear-gradient(180deg, #f5faf6 0%, #fff 100%);
      box-shadow: 0 10px 22px rgba(48, 104, 79, 0.1);
    }

    .bracket-bout.bracket-closeout .bracket-bout-head span:last-child {
      color: var(--green);
      font-weight: 900;
      text-transform: uppercase;
    }

    .bracket-bout.bracket-closeout .bracket-note {
      color: #426151;
    }

    .bracket-bout-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      line-height: 1.2;
    }

    .bracket-bout-head a {
      color: var(--green);
      font-weight: 800;
      text-decoration: none;
    }

    .bracket-bout-head a:hover {
      text-decoration: underline;
    }

    .bracket-sides {
      display: grid;
      gap: 5px;
    }

    .bracket-side {
      min-width: 0;
      display: grid;
      gap: 2px;
      padding: 7px;
      border: 1px solid rgba(30, 39, 34, 0.09);
      border-radius: 6px;
      background: #fafbf9;
    }

    .bracket-side > div {
      min-width: 0;
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      gap: 7px;
      align-items: center;
    }

    .bracket-side strong {
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #e7ece8;
      color: var(--muted);
      font-size: 11px;
    }

    .bracket-side a,
    .bracket-side span {
      min-width: 0;
      overflow: hidden;
      color: var(--ink);
      font-size: 12px;
      font-weight: 800;
      text-overflow: ellipsis;
      text-decoration: none;
      white-space: nowrap;
    }

    .bracket-side a:hover {
      text-decoration: underline;
    }

    .bracket-side em {
      color: var(--muted);
      font-size: 11px;
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bracket-side.winner {
      border-color: rgba(48, 104, 79, 0.28);
      background: #eef6f1;
    }

    .bracket-side.winner strong {
      background: var(--green);
      color: #fff;
    }

    .bracket-side.bye {
      opacity: 0.72;
    }

    .bracket-result,
    .bracket-advance,
    .bracket-incoming,
    .bracket-note {
      color: var(--muted);
      font-size: 11px;
      line-height: 1.35;
    }

    .bracket-advance,
    .bracket-incoming {
      padding-top: 2px;
      border-top: 1px solid rgba(30, 39, 34, 0.07);
    }

    .bracket-bout.has-gap .bracket-advance {
      color: #8a641d;
    }

    .bracket-bout.has-warning .bracket-advance {
      color: #8e3e3e;
    }

    .bracket-page-layout {
      max-width: none;
      width: 100%;
      margin: 0;
    }

    .bracket-page {
      display: grid;
      gap: 16px;
    }

    .bracket-canvas {
      min-width: 0;
      display: grid;
      gap: 16px;
    }

    .bracket-page-panel {
      padding: 14px;
    }

    .bracket-page-scroll {
      padding: 4px 0 8px;
    }

    .bracket-page-compact-scroll {
      padding: 0;
    }

    .bracket-page .bracket-compact-host.brk-compact {
      min-height: min(76vh, 920px);
    }

    .bracket-map-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding: 8px 10px;
      border: 1px solid rgba(30, 39, 34, 0.09);
      border-radius: 7px;
      background: #fff;
    }

    .bracket-map-actions {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
    }

    .bracket-zoom-controls {
      display: inline-flex;
      gap: 2px;
      padding: 2px;
      border: 1px solid rgba(30, 39, 34, 0.1);
      border-radius: 7px;
      background: #f7f9f6;
    }

    .bracket-zoom-controls button {
      min-width: 44px;
      height: 28px;
      padding: 0 8px;
      border: 0;
      border-radius: 5px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
    }

    .bracket-zoom-controls button:hover,
    .bracket-zoom-controls button.active {
      background: #fff;
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(21, 28, 24, 0.08);
    }

    .bracket-map-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 14px;
      align-items: center;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .bracket-map-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .bracket-map-legend i {
      width: 24px;
      height: 0;
      display: inline-block;
      border-top: 2px solid rgba(48, 104, 79, 0.5);
    }

    .bracket-map-legend .legend-gap {
      width: 11px;
      height: 11px;
      border: 1px dashed rgba(30, 39, 34, 0.28);
      border-radius: 3px;
      background: #fbfcfa;
    }

    .bracket-map-legend .legend-source,
    .bracket-map-legend .legend-target {
      width: 11px;
      height: 11px;
      border: 2px solid rgba(78, 107, 154, 0.48);
      border-radius: 3px;
    }

    .bracket-map-legend .legend-target {
      border-color: rgba(48, 104, 79, 0.72);
      background: #eef6f1;
    }

    .bracket-map {
      position: relative;
      width: var(--bracket-map-width, 960px);
      height: var(--bracket-map-height, 520px);
      min-width: 100%;
    }

    .bracket-map-viewport {
      overflow: auto;
      max-height: min(76vh, 920px);
      padding: 8px;
      border: 1px solid rgba(30, 39, 34, 0.08);
      border-radius: 7px;
      background: #f8faf7;
    }

    .bracket-map-stage {
      position: relative;
      min-width: min-content;
      transform-origin: top left;
    }

    .bracket-map-stage > .bracket-map {
      transform: scale(var(--bracket-zoom, 1));
      transform-origin: top left;
    }

    .bracket-connectors {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .bracket-connector {
      fill: none;
      stroke: rgba(48, 104, 79, 0.42);
      stroke-width: 2;
      stroke-linecap: round;
    }

    .bracket-connector.gap {
      stroke: rgba(177, 126, 29, 0.62);
      stroke-dasharray: 7 6;
    }

    .bracket-map.has-selection .bracket-connector {
      opacity: 0.18;
    }

    .bracket-map.has-selection .bracket-connector.is-active {
      opacity: 1;
      stroke-width: 3;
    }

    .bracket-map-round-head {
      position: absolute;
      top: 0;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 8px;
      min-height: 40px;
      padding: 0 2px 8px;
      border-bottom: 1px solid rgba(30, 39, 34, 0.1);
    }

    .bracket-map-round-head strong {
      font-size: 13px;
      line-height: 1.2;
    }

    .bracket-map-round-head span {
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
    }

    .bracket-map-bout {
      position: absolute;
      z-index: 1;
    }

    .bracket-map-bout.is-spacer {
      pointer-events: none;
    }

    .bracket-slot-spacer {
      position: relative;
      box-sizing: border-box;
      height: 154px;
      border: 1px dashed rgba(30, 39, 34, 0.14);
      border-radius: 7px;
      background: #fbfcfa;
    }

    .bracket-slot-spacer::before,
    .bracket-slot-spacer::after {
      content: "";
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 8px;
      height: 8px;
      border: 2px solid rgba(30, 39, 34, 0.22);
      border-radius: 999px;
      background: #fff;
      transform: translateY(-50%);
      box-shadow: 0 0 0 3px rgba(251, 252, 250, 0.92);
    }

    .bracket-slot-spacer::before {
      left: -6px;
    }

    .bracket-slot-spacer::after {
      right: -6px;
    }

    .bracket-map-bout .bracket-bout {
      box-sizing: border-box;
      height: 154px;
      min-height: 0;
      grid-template-rows: auto 1fr auto;
      overflow: visible;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
    }

    .bracket-map-bout .bracket-bout::before,
    .bracket-map-bout .bracket-bout::after {
      content: "";
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 10px;
      height: 10px;
      border: 2px solid rgba(48, 104, 79, 0.58);
      border-radius: 999px;
      background: #fff;
      transform: translateY(-50%);
      box-shadow: 0 0 0 3px rgba(251, 252, 250, 0.92);
    }

    .bracket-map-bout .bracket-bout::before {
      left: -6px;
      display: none;
    }

    .bracket-map-bout .bracket-bout::after {
      right: -6px;
      display: none;
    }

    .bracket-map-bout .bracket-bout.has-incoming::before,
    .bracket-map-bout .bracket-bout.has-outgoing::after {
      display: block;
    }

    .bracket-map-bout .bracket-bout.has-gap::after {
      border-color: rgba(177, 126, 29, 0.72);
    }

    .bracket-map-bout .bracket-advance,
    .bracket-map-bout .bracket-incoming,
    .bracket-map-bout .bracket-note {
      display: none;
    }

    .bracket-gap-marker {
      position: absolute;
      z-index: 2;
      display: grid;
      gap: 3px;
      padding: 7px 8px;
      border: 1px dashed rgba(177, 126, 29, 0.62);
      border-radius: 7px;
      background: #fff9eb;
      color: #8a641d;
      cursor: pointer;
      text-align: left;
      box-shadow: 0 8px 16px rgba(21, 28, 24, 0.05);
    }

    .bracket-gap-marker strong,
    .bracket-gap-marker span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bracket-gap-marker strong {
      font-size: 10px;
      line-height: 1.2;
    }

    .bracket-gap-marker span {
      font-size: 10px;
      line-height: 1.25;
      white-space: normal;
    }

    .bracket-map.has-selection .bracket-bout {
      opacity: 0.54;
    }

    .bracket-map.has-selection .bracket-gap-marker {
      opacity: 0.38;
    }

    .bracket-map.has-selection .bracket-bout.is-selected,
    .bracket-map.has-selection .bracket-bout.is-source,
    .bracket-map.has-selection .bracket-bout.is-target,
    .bracket-map.has-selection .bracket-gap-marker.is-selected {
      opacity: 1;
      border-color: rgba(48, 104, 79, 0.62);
      box-shadow: 0 12px 26px rgba(21, 28, 24, 0.12);
    }

    .bracket-map.has-selection .bracket-bout.is-selected {
      outline: 2px solid rgba(48, 104, 79, 0.18);
      outline-offset: 2px;
    }

    .bracket-map.has-selection .bracket-bout.is-source {
      border-color: rgba(78, 107, 154, 0.45);
    }

    .bracket-map.has-selection .bracket-bout.is-target {
      border-color: rgba(48, 104, 79, 0.72);
    }

    .bracket-map-inspector {
      position: sticky;
      left: 0;
      bottom: 0;
      z-index: 3;
      width: min(560px, calc(100vw - 48px));
      display: grid;
      gap: 3px;
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(30, 39, 34, 0.12);
      border-radius: 7px;
      background: rgba(251, 252, 250, 0.96);
      box-shadow: 0 10px 22px rgba(21, 28, 24, 0.08);
    }

    .bracket-map-inspector strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .bracket-map-inspector span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .bracket-page-board {
      min-width: max(900px, calc(var(--round-count, 3) * 280px));
      grid-template-columns: repeat(var(--round-count, 3), minmax(260px, 1fr));
      gap: 16px;
    }

    .bracket-page-board .bracket-round-bouts {
      gap: 16px;
    }

    .bracket-page-board .bracket-bout {
      padding: 11px;
    }

    .bracket-page-empty {
      min-height: 128px;
    }

    .bracket-support-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
    }

    .bracket-support-grid > section {
      min-width: 0;
      display: grid;
      gap: 10px;
    }

    .bracket-placement-list {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .athlete-result-list {
      display: grid;
      gap: 10px;
    }

    .athlete-result-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
    }

    .athlete-result-card > div:nth-child(2) {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .athlete-result-card strong,
    .athlete-result-card span,
    .athlete-result-card em {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-result-card strong {
      color: var(--ink);
      font-size: 13px;
      line-height: 1.25;
    }

    .athlete-result-card span,
    .athlete-result-card em {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
    }

    .athlete-result-card .event-row-actions {
      grid-column: 1 / -1;
      justify-content: start;
    }

    .athlete-result-place {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
    }

    .athlete-match-browser {
      min-width: 0;
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 28px rgba(21, 28, 24, 0.05);
    }

    .athlete-browser-toolbar {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfa;
    }

    .athlete-browser-toolbar h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.05;
    }

    .athlete-browser-toolbar p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .athlete-browser-modes,
    .athlete-selected-badges,
    .athlete-division-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .athlete-browser-modes .active,
    .athlete-division-tabs .active {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    .athlete-browser-body {
      min-width: 0;
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      min-height: 560px;
    }

    .athlete-scope-rail {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 14px;
      border-right: 1px solid var(--line);
      background: #f4f6f2;
    }

    .athlete-scope-head,
    .athlete-scope-year-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .athlete-scope-list,
    .athlete-scope-year-list {
      display: grid;
      gap: 8px;
    }

    .athlete-scope-list.event-grouped {
      gap: 14px;
    }

    .athlete-scope-year-group {
      display: grid;
      gap: 7px;
    }

    .athlete-scope-year-head {
      padding: 0 4px;
      font-weight: 900;
    }

    .athlete-scope-button {
      width: 100%;
      min-height: 72px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      text-align: left;
    }

    .athlete-scope-button.active {
      border-color: rgba(31, 111, 91, 0.42);
      background: #fbfdfb;
      box-shadow: inset 4px 0 0 var(--green);
    }

    .athlete-scope-button strong,
    .athlete-scope-button span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-scope-button strong {
      display: block;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.25;
    }

    .athlete-scope-button span span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .athlete-scope-count {
      min-width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 7px;
      background: #eef2ed;
      color: var(--green-dark);
      font-weight: 950;
    }

    .athlete-browser-main {
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      align-content: start;
      gap: 12px;
      padding: 14px;
    }

    .athlete-selected-head {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: end;
    }

    .athlete-selected-head h3 {
      margin: 0;
      font-size: 28px;
      line-height: 1.06;
    }

    .athlete-selected-head span {
      color: var(--muted);
      font-size: 13px;
    }

    .athlete-selected-badges {
      margin-top: 8px;
    }

    .athlete-event-path {
      min-width: 0;
      display: none;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(31, 111, 91, 0.05), rgba(69, 111, 159, 0.05)),
        #fff;
    }

    .athlete-event-path.active {
      display: grid;
    }

    .athlete-path-head {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: start;
    }

    .athlete-path-head h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.1;
    }

    .athlete-path-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .athlete-path-track {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 780px);
      gap: 22px;
      padding: 4px 2px 8px;
    }

    .athlete-path-node {
      position: relative;
      min-width: 0;
      min-height: 86px;
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 12px;
      border: 1px solid rgba(31, 111, 91, 0.18);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      text-decoration: none;
      box-shadow: 0 12px 26px rgba(21, 28, 24, 0.07);
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .athlete-path-node:hover,
    .athlete-path-node:focus-visible {
      border-color: rgba(31, 111, 91, 0.48);
      box-shadow: 0 16px 30px rgba(21, 28, 24, 0.1);
      transform: translateY(-1px);
    }

    .athlete-path-node:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(100% + 1px);
      left: 76px;
      height: 21px;
      border-left: 2px solid rgba(31, 111, 91, 0.34);
    }

    .athlete-path-node:not(:last-child)::before {
      content: "";
      position: absolute;
      top: calc(100% + 13px);
      left: 72px;
      width: 8px;
      height: 8px;
      border-right: 2px solid rgba(31, 111, 91, 0.34);
      border-bottom: 2px solid rgba(31, 111, 91, 0.34);
      transform: rotate(45deg);
    }

    .athlete-path-round {
      grid-row: 1 / span 2;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .athlete-path-node strong {
      min-width: 0;
      grid-column: 2;
      overflow: hidden;
      font-size: 15px;
      line-height: 1.18;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-path-node > span:not(.athlete-path-round):not(.athlete-path-actions) {
      min-width: 0;
      grid-column: 2;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-path-actions {
      grid-row: 1 / span 2;
      grid-column: 3;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .athlete-year-match-list {
      display: grid;
      gap: 12px;
    }

    .athlete-match-group {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }

    .athlete-match-group-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfa;
    }

    .athlete-match-group-head > div:first-child {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .athlete-match-group-head strong,
    .athlete-match-group-head span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-match-group-head span {
      color: var(--muted);
      font-size: 12px;
    }

    .text-button.disabled {
      pointer-events: none;
      opacity: 0.55;
    }

    .athlete-page-app {
      background:
        linear-gradient(180deg, rgba(31, 111, 91, 0.06), transparent 280px),
        var(--bg);
    }

    .athlete-page-layout {
      width: min(1540px, calc(100vw - 32px));
      max-width: 100%;
      margin: 0 auto;
      padding: 18px 0 56px;
    }

    .athlete-page-layout .admin-dashboard {
      display: grid;
      gap: 18px;
    }

    .athlete-profile-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
      gap: 14px;
      align-items: stretch;
    }

    .athlete-identity-card,
    .athlete-quick-panel,
    .athlete-match-browser {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 38px rgba(21, 28, 24, 0.08);
    }

    .athlete-identity-card {
      min-width: 0;
      min-height: 250px;
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
      padding: 24px;
      background:
        linear-gradient(135deg, rgba(31, 111, 91, 0.1), transparent 42%),
        radial-gradient(circle at 92% 18%, rgba(214, 165, 67, 0.2), transparent 34%),
        #fff;
    }

    .athlete-avatar {
      position: relative;
      width: 108px;
      height: 108px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(135deg, var(--green), var(--green-dark));
      color: #fff;
      font-size: 34px;
      font-weight: 950;
      letter-spacing: 0;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 16px 34px rgba(22, 79, 66, 0.2);
    }

    .athlete-avatar img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .athlete-identity-copy {
      min-width: 0;
      display: grid;
      gap: 10px;
      align-content: center;
    }

    .athlete-identity-copy h1 {
      max-width: 920px;
      margin: 0;
      font-size: 60px;
      line-height: 0.96;
      letter-spacing: 0;
    }

    .athlete-identity-copy p {
      max-width: 800px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.48;
    }

    .athlete-identity-copy .event-action-row {
      justify-content: start;
      margin-top: 3px;
    }

    .athlete-profile-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-height: 38px;
    }

    .athlete-follow-button {
      min-width: 128px;
      justify-content: center;
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    .athlete-follow-button:hover,
    .athlete-follow-button:focus-visible {
      border-color: var(--green-dark);
      background: var(--green-dark);
      color: #fff;
    }

    .athlete-follow-button.active {
      border-color: rgba(31, 111, 91, 0.32);
      background: rgba(31, 111, 91, 0.1);
      color: var(--green-dark);
    }

    .athlete-follow-button:disabled {
      cursor: wait;
      opacity: 0.65;
    }

    .athlete-follow-status {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .athlete-achievements {
      max-width: 860px;
      margin-top: -1px;
    }

    .athlete-achievements.hidden {
      display: none;
    }

    .athlete-achievement-rail {
      display: grid;
      gap: 6px;
    }

    .athlete-achievement-summary {
      min-width: 0;
      display: flex;
      flex: 0 1 auto;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .athlete-achievement-group {
      min-width: 0;
      border: 1px solid rgba(30, 39, 34, 0.1);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.66);
    }

    .athlete-achievement-group summary {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      cursor: pointer;
      list-style: none;
    }

    .athlete-achievement-group summary::-webkit-details-marker {
      display: none;
    }

    .athlete-achievement-group summary::after {
      content: "+";
      width: 22px;
      height: 22px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #f8faf7;
      color: var(--muted);
      font-size: 14px;
      font-weight: 950;
      line-height: 1;
    }

    .athlete-achievement-group[open] summary::after {
      content: "-";
    }

    .athlete-achievement-events {
      display: grid;
      gap: 4px;
      margin: 0;
      padding: 6px;
      list-style: none;
    }

    .athlete-achievement-event-list {
      display: grid;
      gap: 6px;
    }

    .athlete-achievement-event-list-nested {
      padding: 0 8px 8px 42px;
    }

    .athlete-achievement-tournament {
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(30, 39, 34, 0.1);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.66);
    }

    .athlete-achievement-event-list-nested .athlete-achievement-tournament {
      border: 0;
      border-top: 1px solid rgba(30, 39, 34, 0.1);
      border-radius: 0;
      background: transparent;
    }

    .athlete-achievement-tournament-head {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 10px 3px;
    }

    .athlete-achievement-tournament-head strong {
      min-width: 0;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .athlete-achievement-tournament-head span {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }

    .athlete-achievement-event {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 6px;
      border: 1px solid rgba(30, 39, 34, 0.08);
      border-radius: 7px;
      background: rgba(248, 250, 247, 0.7);
    }

    .athlete-achievement-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: flex-end;
    }

    .athlete-achievement-actions .text-button {
      min-height: 30px;
      padding: 6px 9px;
      font-size: 11px;
    }

    .athlete-medal {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid rgba(31, 41, 55, 0.08);
      color: #281f08;
      font-size: 12px;
      font-weight: 950;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    .athlete-medal.gold {
      background: linear-gradient(135deg, #f7db88, #d7a33d);
    }

    .athlete-medal.silver {
      background: linear-gradient(135deg, #f2f5f7, #aeb9c2);
      color: #28323a;
    }

    .athlete-medal.bronze {
      background: linear-gradient(135deg, #e0a26e, #9c6332);
      color: #fff8ed;
    }

    .athlete-medal.podium {
      background: linear-gradient(135deg, #eef5ee, #c9d9cf);
      color: var(--green-dark);
    }

    .athlete-achievement-line {
      min-width: 0;
      flex: 1 1 310px;
      display: grid;
      gap: 1px;
    }

    .athlete-achievement-line strong,
    .athlete-achievement-line span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-achievement-line strong {
      color: var(--ink);
      font-size: 12px;
      font-weight: 950;
    }

    .athlete-achievement-line span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .athlete-quick-panel {
      min-width: 0;
      display: grid;
      gap: 13px;
      align-content: center;
      padding: 18px;
    }

    .athlete-quick-panel h2 {
      margin: 0;
      font-size: 21px;
      line-height: 1.1;
    }

    .athlete-quick-panel > div:first-child {
      display: grid;
      gap: 3px;
    }

    .athlete-recommended-section {
      min-width: 0;
      display: grid;
      gap: 12px;
      padding: 4px 0 2px;
    }

    .athlete-upcoming-section {
      min-width: 0;
      display: grid;
      gap: 12px;
      padding: 4px 0 2px;
    }

    .athlete-upcoming-section.hidden {
      display: none;
    }

    .athlete-upcoming-grid {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .athlete-upcoming-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) 28px;
      align-items: center;
      gap: 14px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      text-decoration: none;
      box-shadow: 0 8px 22px rgba(21, 28, 24, 0.05);
    }

    .athlete-upcoming-card:hover,
    .athlete-upcoming-card:focus-visible {
      border-color: #8eaa9f;
      box-shadow: 0 10px 26px rgba(21, 28, 24, 0.09);
    }

    .athlete-upcoming-date {
      width: 64px;
      min-height: 68px;
      display: grid;
      place-content: center;
      gap: 1px;
      border: 1px solid #ccd8d1;
      border-radius: 7px;
      background: #f3f7f4;
      color: var(--muted);
      text-align: center;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .athlete-upcoming-date strong {
      color: var(--ink);
      font-size: 24px;
      line-height: 1;
    }

    .athlete-upcoming-copy {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .athlete-upcoming-copy > strong,
    .athlete-upcoming-copy > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-upcoming-copy > strong {
      font-size: 17px;
      line-height: 1.2;
    }

    .athlete-upcoming-copy > span:last-child {
      color: var(--muted);
      font-size: 12px;
    }

    .athlete-upcoming-status {
      width: fit-content;
      color: #315e4c;
      font-size: 10px;
      font-weight: 950;
      text-transform: uppercase;
    }

    .athlete-upcoming-status.live {
      color: #a83b2f;
    }

    .athlete-upcoming-open {
      color: var(--green-dark);
      font-size: 28px;
      line-height: 1;
      text-align: center;
    }

    .athlete-recommended-section.hidden {
      display: none;
    }

    .athlete-section-heading {
      min-width: 0;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    .athlete-section-heading > div {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .athlete-section-heading h2 {
      margin: 0;
      color: var(--ink);
      font-size: 28px;
      line-height: 1.05;
    }

    .athlete-section-meta {
      color: var(--muted);
      font-size: 13px;
      font-weight: 850;
    }

    .athlete-recommended-grid {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .athlete-recommended-card {
      min-width: 0;
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 12px 30px rgba(21, 28, 24, 0.07);
    }

    .athlete-recommended-media {
      position: relative;
      min-width: 0;
      aspect-ratio: 16 / 8.5;
      display: block;
      overflow: hidden;
      background: #18231f;
    }

    .athlete-recommended-media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 0.2s ease;
    }

    .athlete-recommended-media:hover img,
    .athlete-recommended-media:focus-visible img {
      transform: scale(1.025);
    }

    .athlete-recommended-reason {
      position: absolute;
      top: 10px;
      left: 10px;
      max-width: calc(100% - 72px);
      overflow: hidden;
      padding: 6px 8px;
      border: 1px solid rgba(255, 255, 255, 0.68);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-recommended-play {
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, 0.78);
      border-radius: 999px;
      background: rgba(20, 38, 32, 0.88);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .athlete-recommended-play::before {
      content: "";
      width: 0;
      height: 0;
      margin-left: 3px;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 10px solid #fff;
    }

    .athlete-recommended-copy {
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto auto auto 1fr;
      gap: 7px;
      padding: 14px;
    }

    .athlete-recommended-kicker {
      min-width: 0;
      overflow: hidden;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
      text-overflow: ellipsis;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .athlete-recommended-copy h3 {
      min-width: 0;
      margin: 0;
      font-size: 20px;
      line-height: 1.12;
    }

    .athlete-recommended-copy h3 a {
      color: var(--ink);
      text-decoration: none;
    }

    .athlete-recommended-copy h3 a:hover,
    .athlete-recommended-copy h3 a:focus-visible {
      color: var(--green-dark);
      text-decoration: underline;
    }

    .athlete-recommended-copy p {
      min-width: 0;
      overflow: hidden;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-recommended-tags,
    .athlete-recommended-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .athlete-recommended-actions {
      align-self: end;
      padding-top: 4px;
    }

    .athlete-summary-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .athlete-summary-card {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8faf7;
    }

    .athlete-summary-card strong {
      color: var(--ink);
      font-size: 24px;
      line-height: 1;
    }

    .athlete-summary-card span {
      min-width: 0;
      overflow: hidden;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .chip-row,
    .athlete-match-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .chip {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #f8faf7;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
    }

    .chip.green {
      border-color: rgba(31, 111, 91, 0.22);
      background: rgba(31, 111, 91, 0.09);
      color: var(--green-dark);
    }

    .chip.blue {
      border-color: rgba(69, 111, 159, 0.22);
      background: rgba(69, 111, 159, 0.1);
      color: #2b527d;
    }

    .chip.gold {
      border-color: rgba(214, 165, 67, 0.26);
      background: rgba(214, 165, 67, 0.14);
      color: #7a5a16;
    }

    .chip.silver {
      border-color: rgba(130, 145, 160, 0.26);
      background: rgba(130, 145, 160, 0.12);
      color: #47525e;
    }

    .chip.bronze {
      border-color: rgba(168, 105, 54, 0.26);
      background: rgba(168, 105, 54, 0.12);
      color: #855326;
    }

    .chip.red {
      border-color: rgba(182, 64, 54, 0.22);
      background: rgba(182, 64, 54, 0.09);
      color: var(--red);
    }

    .belt-icons {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
    }

    .belt-icon {
      width: 34px;
      height: 13px;
      display: inline-block;
      position: relative;
      flex: 0 0 auto;
      overflow: hidden;
      border: 1px solid rgba(22, 25, 23, 0.28);
      border-radius: 3px;
      background: #111;
      box-shadow: inset 10px 0 0 rgba(255, 255, 255, 0.18);
    }

    .belt-icon::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 6px;
      width: 7px;
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      border-right: 1px solid rgba(0, 0, 0, 0.22);
      background: rgba(255, 255, 255, 0.18);
    }

    .belt-icon.belt-white {
      background: #f9fbf8;
    }

    .belt-icon.belt-blue {
      background: #315f9f;
    }

    .belt-icon.belt-purple {
      background: #7054a6;
    }

    .belt-icon.belt-brown {
      background: #7a5231;
    }

    .belt-icon.belt-black {
      background: #141514;
    }

    .belt-icon.belt-unknown {
      background: repeating-linear-gradient(135deg, #e7ebe5 0 5px, #cdd4cb 5px 10px);
    }

    .belt-token {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .athlete-match-browser {
      min-height: 760px;
      box-shadow: 0 18px 48px rgba(21, 28, 24, 0.1);
    }

    .athlete-browser-toolbar {
      padding: 15px 16px;
      background:
        linear-gradient(90deg, rgba(31, 111, 91, 0.05), transparent 48%),
        #fbfcfa;
    }

    .athlete-match-browser .athlete-browser-toolbar .filter-head {
      display: none;
    }

    .athlete-browser-modes .text-button {
      min-width: 84px;
      justify-content: center;
    }

    .athlete-browser-body {
      grid-template-columns: 330px minmax(0, 1fr);
      min-height: 680px;
    }

    .athlete-scope-rail {
      gap: 12px;
      padding: 16px;
      background: #eef2ed;
    }

    .athlete-scope-button {
      min-height: 76px;
      gap: 8px 10px;
      padding: 11px;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .athlete-scope-button:hover,
    .athlete-scope-button:focus-visible {
      border-color: rgba(31, 111, 91, 0.36);
      box-shadow: 0 12px 24px rgba(21, 28, 24, 0.08);
      transform: translateY(-1px);
    }

    .athlete-scope-button.active {
      border-color: rgba(31, 111, 91, 0.52);
      background: #fff;
      box-shadow: inset 5px 0 0 var(--green), 0 14px 24px rgba(21, 28, 24, 0.08);
    }

    .athlete-scope-button .belt-icons {
      grid-column: 1 / -1;
      margin-top: -1px;
    }

    .athlete-scope-count {
      min-width: 44px;
      height: 44px;
      background: #e7ece5;
      font-size: 15px;
    }

    .athlete-browser-main {
      gap: 14px;
      padding: 18px;
      background: #fff;
    }

    .athlete-selected-head {
      align-items: start;
      padding-bottom: 4px;
    }

    .athlete-selected-head h3 {
      font-size: clamp(30px, 3.2vw, 44px);
      line-height: 1;
    }

    .athlete-season-strip {
      min-width: 0;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 2px 6px;
    }

    .athlete-season-dot {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8faf7;
      color: var(--ink);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .athlete-season-dot strong {
      font-size: 13px;
    }

    .athlete-match-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 10px;
      padding: 12px;
    }

    .athlete-match-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 68px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      min-height: 94px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: inherit;
      text-decoration: none;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    }

    .athlete-match-card:hover,
    .athlete-match-card:focus-visible {
      border-color: rgba(31, 111, 91, 0.42);
      box-shadow: 0 14px 26px rgba(21, 28, 24, 0.09);
      transform: translateY(-1px);
    }

    .athlete-match-thumb {
      width: 68px;
      height: 68px;
      display: block;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(31, 111, 91, 0.86), rgba(69, 111, 159, 0.78)),
        linear-gradient(45deg, transparent 44%, rgba(255, 255, 255, 0.36) 44% 48%, transparent 48%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    .athlete-match-copy {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .athlete-match-copy strong,
    .athlete-match-copy > span:not(.athlete-match-meta) {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-match-copy strong {
      color: var(--ink);
      font-size: 14px;
      line-height: 1.18;
    }

    .athlete-match-copy > span:not(.athlete-match-meta) {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.25;
    }

    .athlete-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .athlete-match-action {
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #f8faf7;
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .athlete-match-action.primary {
      border-color: var(--green);
      background: var(--green);
      color: #fff;
    }

    .athlete-match-library {
      min-width: 0;
      display: grid;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 14px 38px rgba(21, 28, 24, 0.07);
    }

    .athlete-match-library-heading {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      background: #fbfcfa;
    }

    .athlete-match-library-heading h2 {
      margin: 0;
      font-size: 24px;
      line-height: 1.05;
    }

    .athlete-match-library-toolbar {
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
      background: #f7f9f6;
    }

    .athlete-match-search-field {
      width: 100%;
      max-width: 620px;
    }

    .athlete-search-match-results {
      min-width: 0;
      display: grid;
      gap: 10px;
      padding: 14px 16px 16px;
    }

    .athlete-search-match-list {
      min-width: 0;
      display: grid;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    .athlete-search-match-row {
      min-width: 0;
      min-height: 86px;
      display: grid;
      grid-template-columns: 46px minmax(240px, 1fr) minmax(210px, auto) 22px;
      gap: 12px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      text-decoration: none;
      transition: background 0.16s ease, box-shadow 0.16s ease;
    }

    .athlete-search-match-row:last-child {
      border-bottom: 0;
    }

    .athlete-search-match-row:hover,
    .athlete-search-match-row:focus-visible {
      position: relative;
      z-index: 1;
      background: #f7faf7;
      box-shadow: inset 4px 0 0 var(--green);
      outline: 0;
    }

    .athlete-search-match-order {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #eef2ed;
      color: var(--green-dark);
      font-size: 12px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .athlete-search-match-copy {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .athlete-search-match-copy strong,
    .athlete-search-match-copy > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .athlete-search-match-copy strong {
      font-size: 16px;
      line-height: 1.2;
    }

    .athlete-search-match-copy > span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .athlete-search-match-context {
      color: var(--blue) !important;
      font-weight: 850;
    }

    .athlete-search-match-status {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 6px;
    }

    .athlete-search-match-open {
      color: var(--muted);
      font-size: 28px;
      line-height: 1;
    }

    .athlete-match-load-more {
      display: flex;
      justify-content: center;
      padding: 6px 0 2px;
    }

    .athlete-match-search-empty {
      min-height: 180px;
    }

    .athlete-path-track {
      grid-template-columns: minmax(0, 860px);
    }

    .athlete-path-node {
      grid-template-columns: 138px minmax(0, 1fr) auto;
      min-height: 94px;
      padding: 13px;
    }

    .athlete-source-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }

    .athlete-source-tools {
      display: grid;
      gap: 8px;
      margin-bottom: 12px;
    }

    .athlete-source-form {
      display: grid;
      grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    .athlete-source-form select,
    .athlete-source-form input {
      width: 100%;
      min-width: 0;
      min-height: 38px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      color: var(--ink);
      font: inherit;
    }

    .athlete-source-card strong {
      text-transform: capitalize;
    }

    .source-pill-link {
      color: inherit;
      text-decoration: none;
    }

    .source-pill-link:hover {
      text-decoration: underline;
    }

    .linked-athlete-fact a {
      color: inherit;
      text-decoration: none;
    }

    .linked-athlete-fact a:hover {
      text-decoration: underline;
    }

    .event-match-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
    }

    .event-match-row > div:first-child {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .event-match-row strong,
    .event-match-row a {
      min-width: 0;
      color: inherit;
      font-size: 14px;
      line-height: 1.25;
      text-decoration: none;
    }

    .event-match-row a:hover {
      text-decoration: underline;
    }

    .event-match-row span {
      color: var(--muted);
      font-size: 12px;
    }

    .event-row-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: end;
    }

    .video-fact-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    .video-fact {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .video-fact span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .video-fact strong {
      min-width: 0;
      overflow: hidden;
      font-size: 14px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .detail-summary {
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .detail-summary-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .admin-event-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .admin-event-card {
      min-height: 108px;
      display: grid;
      gap: 9px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fafbf9;
    }

    .admin-list-row {
      min-height: 0;
      grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr) minmax(180px, auto) auto;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      background: #fff;
    }

    .admin-list-main {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .admin-event-card strong {
      display: block;
      overflow: hidden;
      font-size: 15px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-event-card span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.3;
    }

    .admin-list-main span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .admin-event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-self: end;
    }

    .admin-list-meta,
    .admin-list-counts,
    .admin-list-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .admin-list-meta {
      min-width: 0;
    }

    .admin-list-counts {
      justify-content: flex-end;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      white-space: nowrap;
    }

    .admin-list-counts span {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
    }

    .admin-list-counts strong {
      display: inline;
      overflow: visible;
      color: var(--ink);
      font-size: 13px;
      white-space: nowrap;
    }

    .admin-list-actions {
      justify-content: flex-end;
      white-space: nowrap;
    }

    .analysis-empty {
      display: grid;
      gap: 5px;
      padding: 18px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .analysis-empty strong {
      font-size: 15px;
    }

    .analysis-empty span,
    .analysis-empty p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .video-agent-panel {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .video-agent-panel > .button-row {
      justify-content: flex-start;
    }

    .analysis-worker-status {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 8px;
    }

    .analysis-worker-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f7faf8;
    }

    .analysis-worker-main {
      display: flex;
      gap: 10px;
      align-items: center;
      min-width: 0;
    }

    .analysis-worker-dot {
      width: 10px;
      height: 10px;
      flex: 0 0 10px;
      border-radius: 999px;
      background: var(--muted);
      box-shadow: 0 0 0 3px rgba(92, 102, 91, 0.12);
    }

    .analysis-worker-card.is-idle .analysis-worker-dot {
      background: #3a7b56;
      box-shadow: 0 0 0 3px rgba(58, 123, 86, 0.15);
    }

    .analysis-worker-card.is-running .analysis-worker-dot,
    .analysis-worker-card.is-stopping .analysis-worker-dot {
      background: #c47b25;
      box-shadow: 0 0 0 3px rgba(196, 123, 37, 0.16);
    }

    .analysis-worker-card.is-paused,
    .analysis-worker-card.is-cooldown {
      background: #fff7ed;
      border-color: #e6c292;
    }

    .analysis-worker-card.is-paused .analysis-worker-dot,
    .analysis-worker-card.is-cooldown .analysis-worker-dot {
      background: #c47b25;
      box-shadow: 0 0 0 3px rgba(196, 123, 37, 0.16);
    }

    .analysis-worker-card.is-muted {
      background: #f4f5f2;
      border-color: #d9e0db;
    }

    .analysis-worker-card.is-muted .analysis-worker-dot {
      background: var(--muted);
      box-shadow: 0 0 0 3px rgba(92, 102, 91, 0.12);
    }

    .analysis-worker-card.is-error .analysis-worker-dot,
    .analysis-worker-card.is-offline .analysis-worker-dot {
      background: var(--red);
      box-shadow: 0 0 0 3px rgba(182, 64, 54, 0.14);
    }

    .analysis-worker-card strong,
    .analysis-worker-card span,
    .analysis-worker-card p {
      overflow-wrap: anywhere;
    }

    .analysis-worker-card span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }

    .analysis-worker-meta {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .analysis-worker-meta p {
      margin: 0;
      color: var(--ink);
      font-size: 13px;
      line-height: 1.4;
    }

    .analysis-job-list {
      display: grid;
      gap: 6px;
    }

    .analysis-job-tree-node {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .analysis-job-tree-children {
      display: grid;
      gap: 6px;
      margin-left: clamp(10px, calc(var(--job-depth, 0) * 4px + 16px), 32px);
      padding-left: 12px;
      border-left: 2px solid #d9e0db;
    }

    .analysis-job-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fafbf9;
    }

    .analysis-job-card.global-analysis-job {
      border-left: 4px solid #b8c5bb;
    }

    .analysis-job-card.global-analysis-job.depth-1,
    .analysis-job-card.global-analysis-job.depth-2,
    .analysis-job-card.global-analysis-job.depth-3,
    .analysis-job-card.global-analysis-job.depth-4 {
      background: #fbfcfa;
    }

    .analysis-job-card.global-analysis-job.is-queued {
      border-left-color: var(--blue);
    }

    .analysis-job-card.global-analysis-job.is-running,
    .analysis-job-card.global-analysis-job.is-waiting_for_tool {
      border-left-color: #c47b25;
    }

    .analysis-job-card.global-analysis-job.is-failed {
      border-left-color: var(--red);
      background: #fff6f4;
    }

    .analysis-job-card.global-analysis-job.is-complete {
      border-left-color: var(--green);
    }

    .analysis-job-card strong,
    .analysis-job-card span,
    .analysis-job-card p {
      overflow-wrap: anywhere;
    }

    .analysis-job-card span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }

    .analysis-job-card p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .analysis-job-progress-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }

    .analysis-job-activity {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .jobs-page-app .analysis-job-list {
      gap: 6px;
    }

    .jobs-page-app .analysis-job-card {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
      padding: 10px 12px;
      border-radius: 7px;
      background: #fff;
      box-shadow: none;
    }

    .jobs-page-app .analysis-job-card strong,
    .jobs-page-app .analysis-job-card span,
    .jobs-page-app .analysis-job-card p {
      overflow-wrap: break-word;
      word-break: normal;
    }

    .analysis-job-compact-main {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .analysis-job-title-line {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .analysis-job-title-line strong {
      min-width: 0;
      overflow: hidden;
      font-size: 14px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .analysis-job-meta-line {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      min-width: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .analysis-job-meta-line span {
      display: inline;
      max-width: 100%;
      margin: 0;
      overflow: hidden;
      color: inherit;
      font-size: inherit;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .analysis-job-relation-line {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      color: #59665f;
      font-size: 11px;
      font-weight: 700;
    }

    .analysis-job-relation-line span {
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      min-height: 18px;
      margin: 0;
      overflow: hidden;
      padding: 1px 6px;
      border: 1px solid #d5ded8;
      border-radius: 999px;
      background: #f3f7f4;
      color: inherit;
      font-size: inherit;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .jobs-page-app .analysis-job-card p {
      display: -webkit-box;
      margin: 0;
      overflow: hidden;
      overflow-wrap: break-word;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.3;
      word-break: normal;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    .jobs-page-app .analysis-job-card .event-row-actions {
      width: 100%;
      min-width: 0;
      justify-content: flex-start;
    }

    .jobs-page-app .analysis-job-card .text-button {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 5px 9px;
      font-size: 12px;
      white-space: nowrap;
    }

    .job-status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 7px;
      border: 1px solid rgba(92, 102, 91, 0.18);
      border-radius: 999px;
      background: #f4f6f3;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .job-status-pill.is-queued {
      border-color: rgba(57, 93, 139, 0.22);
      background: #f3f7fb;
      color: #395d8b;
    }

    .job-status-pill.is-running,
    .job-status-pill.is-waiting_for_tool {
      border-color: rgba(196, 123, 37, 0.24);
      background: #fff8ee;
      color: #8d561b;
    }

    .job-status-pill.is-failed {
      border-color: rgba(182, 64, 54, 0.24);
      background: #fff6f4;
      color: var(--red);
    }

    .job-status-pill.is-complete {
      border-color: rgba(58, 123, 86, 0.22);
      background: #f3faf5;
      color: #2f704c;
    }

    .job-status-pill.is-pending {
      border-color: rgba(57, 93, 139, 0.22);
      background: #f3f7fb;
      color: #395d8b;
    }

    .job-status-pill.is-claimed {
      border-color: rgba(196, 123, 37, 0.24);
      background: #fff8ee;
      color: #8d561b;
    }

    .job-status-pill.is-needs_review {
      border-color: rgba(128, 92, 32, 0.28);
      background: #fffbea;
      color: #7a571f;
    }

    .work-item-list {
      gap: 6px;
    }

    .jobs-page-app .analysis-job-card.work-item-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    .jobs-page-app .analysis-job-card.work-item-card.is-pending {
      border-left-color: var(--blue);
    }

    .jobs-page-app .analysis-job-card.work-item-card.is-claimed {
      border-left-color: #c47b25;
    }

    .jobs-page-app .analysis-job-card.work-item-card.is-needs_review {
      border-left-color: #9f7a2e;
      background: #fffdf4;
    }

    .jobs-page-app .analysis-job-card.work-item-card.is-skipped,
    .jobs-page-app .analysis-job-card.work-item-card.is-cancelled {
      border-left-color: #aeb7b1;
      opacity: 0.9;
    }

    .work-item-selector {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin: 0;
    }

    .work-item-selector input {
      width: 16px;
      height: 16px;
      margin: 0;
    }

    .jobs-page-app .analysis-job-card.work-item-card .event-row-actions {
      width: auto;
      justify-content: flex-end;
    }

    .jobs-page-app .analysis-job-activity.compact-details {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 4px;
      padding: 8px 0 0;
    }

    .analysis-activity-group {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .analysis-activity-group > strong {
      color: var(--ink);
      font-size: 12px;
    }

    .analysis-activity-row {
      display: grid;
      gap: 2px;
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      min-width: 0;
    }

    .analysis-activity-row.is-error {
      border-color: rgba(182, 64, 54, 0.35);
      background: #fff6f4;
    }

    .analysis-activity-row span,
    .analysis-activity-row p {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .analysis-activity-row span {
      margin: 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .analysis-activity-row p {
      margin: 0;
      color: var(--ink);
      font-size: 12px;
      line-height: 1.35;
    }

    .extraction-timeline {
      display: grid;
      gap: 10px;
    }

    .timeline-topbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }

    .timeline-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      align-items: center;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .timeline-legend span {
      display: inline-flex;
      gap: 5px;
      align-items: center;
    }

    .timeline-legend i {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--line);
    }

    .timeline-legend .legend-region {
      border-radius: 3px;
      background: #dbeaf4;
    }

    .timeline-legend .legend-match {
      border-radius: 3px;
      background: var(--ink);
    }

    .timeline-legend .legend-clock,
    .timeline-legend .legend-frame {
      background: var(--green);
    }

    .timeline-legend .legend-ai {
      background: var(--blue);
    }

    .timeline-toolbar {
      display: inline-flex;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
    }

    .timeline-toolbar button {
      min-width: 44px;
      padding: 6px 9px;
      border: 0;
      border-right: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .timeline-toolbar button:last-child {
      border-right: 0;
    }

    .timeline-toolbar button.active {
      background: var(--ink);
      color: #fff;
    }

    .timeline-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
      gap: 12px;
      align-items: start;
    }

    .timeline-viewport {
      overflow-x: auto;
      overscroll-behavior-x: contain;
      padding-bottom: 4px;
      outline: none;
    }

    .timeline-viewport:focus-visible {
      outline: 2px solid rgba(42, 102, 151, 0.4);
      outline-offset: 3px;
    }

    .timeline-canvas {
      width: 100%;
      min-width: var(--timeline-width, 720px);
      display: grid;
      gap: 8px;
      transition: min-width 160ms ease;
    }

    .timeline-inspector {
      display: grid;
      gap: 6px;
      min-height: 134px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fafbf9;
    }

    .timeline-inspector strong {
      font-size: 13px;
      line-height: 1.25;
    }

    .timeline-inspector span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }

    .timeline-inspector p {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .timeline-detail-section {
      display: grid;
      gap: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--line);
    }

    .timeline-detail-section b {
      color: var(--ink);
      font-size: 11px;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .timeline-detail-grid {
      display: grid;
      gap: 4px;
    }

    .timeline-detail-row {
      display: grid;
      grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1fr) auto;
      gap: 6px;
      align-items: baseline;
      min-width: 0;
    }

    .timeline-detail-row span,
    .timeline-detail-row strong,
    .timeline-detail-row em {
      min-width: 0;
      font-size: 11px;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .timeline-detail-row span {
      color: var(--muted);
      font-weight: 750;
    }

    .timeline-detail-row strong {
      color: var(--ink);
      font-weight: 800;
    }

    .timeline-detail-row em {
      color: var(--green-dark);
      font-style: normal;
      font-weight: 850;
    }

    .timeline-detail-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding-top: 6px;
      border-top: 1px solid var(--line);
    }

    .timeline-detail-tags span {
      max-width: 100%;
      padding: 3px 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: var(--muted);
      font-size: 10px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .timeline-detail-json {
      padding-top: 4px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px;
    }

    .timeline-detail-json summary {
      cursor: pointer;
      font-weight: 850;
    }

    .timeline-detail-json pre {
      max-height: 240px;
      margin: 6px 0 0;
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #fff;
      color: var(--ink);
      font-size: 10px;
      line-height: 1.45;
      white-space: pre-wrap;
    }

    .timeline-frame-image {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      max-height: 240px;
      object-fit: contain;
      background: #eef0f2;
      border-radius: 4px;
    }

    .timeline-scale {
      position: relative;
      height: 26px;
      margin-left: 112px;
      border-bottom: 1px solid var(--line);
    }

    .timeline-tick {
      position: absolute;
      top: 0;
      bottom: 0;
      transform: translateX(-50%);
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .timeline-tick i {
      display: block;
      width: 1px;
      height: 12px;
      margin: 0 auto 2px;
      background: var(--line);
    }

    .timeline-tick b {
      font-weight: 750;
      white-space: nowrap;
    }

    .timeline-lane {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
    }

    .timeline-lane-label {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .timeline-lane-label strong {
      font-size: 12px;
      line-height: 1.2;
    }

    .timeline-lane-label span {
      overflow: hidden;
      color: var(--muted);
      font-size: 11px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .timeline-lane-track {
      position: relative;
      min-height: 34px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 7px;
      background:
        linear-gradient(90deg, rgba(31, 111, 91, 0.05) 1px, transparent 1px) 0 0 / 25% 100%,
        #fff;
    }

    .timeline-item {
      appearance: none;
      padding: 0;
      border: 0;
      font: inherit;
      cursor: pointer;
    }

    .timeline-lane-track.has-frame-points {
      max-height: 180px;
      overflow-y: auto;
    }

    .match-segment {
      position: absolute;
      top: 6px;
      bottom: 6px;
      min-width: 14px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(42, 102, 151, 0.28);
      border-radius: 5px;
      background: #dbeaf4;
      color: #174764;
      font-size: 11px;
      font-weight: 850;
      z-index: 3;
      transition: box-shadow 120ms ease, transform 120ms ease;
    }

    .match-segment {
      border-color: rgba(22, 31, 38, 0.28);
      background: var(--ink);
      color: #fff;
      z-index: 4;
    }

    .match-segment.partial,
    .match-segment.clip,
    .match-segment.interrupted {
      background: #5e6a72;
    }

    .match-segment.unknown {
      background: #879099;
    }

    .match-segment:hover,
    .match-segment.active {
      box-shadow: 0 0 0 2px rgba(42, 102, 151, 0.25);
      transform: translateY(-1px);
    }

    .match-segment span {
      color: inherit;
      font-size: inherit;
    }

    .timeline-lane-empty {
      min-height: 32px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 12px;
    }

    .timeline-point {
      position: absolute;
      top: 50%;
      transform: translateX(-50%);
      border-radius: 999px;
      z-index: 2;
      transition: box-shadow 120ms ease, transform 120ms ease;
    }

    .timeline-point.frame {
      top: 6px;
      width: 12px;
      height: 22px;
      background: transparent;
    }

    .timeline-point.frame::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: #b8c5bb;
    }

    .timeline-point.frame.analyzed-frame::before {
      width: 3px;
      background: var(--blue);
    }

    .timeline-point.frame.has_clock::before {
      background: var(--green);
    }

    .timeline-point.frame.live_match::before {
      background: var(--ink);
    }

    .timeline-point.frame.action_visible::before {
      width: 4px;
      background: var(--green-dark);
      box-shadow: 0 0 0 2px rgba(31, 111, 91, 0.16);
    }

    .timeline-point.frame.hand_raise::before {
      width: 5px;
      background: var(--yellow);
      box-shadow: 0 0 0 2px rgba(244, 184, 74, 0.28);
    }

    .timeline-point.frame.replay::before {
      width: 5px;
      background: repeating-linear-gradient(
        to bottom,
        #9f3f37 0,
        #9f3f37 6px,
        #f4b84a 6px,
        #f4b84a 12px
      );
      box-shadow: 0 0 0 2px rgba(159, 63, 55, 0.18);
    }

    .timeline-point.ai,
    .timeline-point.ocr {
      width: 14px;
      height: 14px;
      margin-top: -7px;
      box-shadow: 0 0 0 2px #fff;
    }

    .timeline-point:hover,
    .timeline-point.active {
      box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(42, 102, 151, 0.22);
      transform: translateX(-50%) scale(1.08);
      z-index: 5;
    }

    .timeline-point.frame:hover,
    .timeline-point.frame.active {
      box-shadow: none;
    }

    .timeline-point.frame:hover::before,
    .timeline-point.frame.active::before {
      width: 4px;
      background: var(--ink);
    }

    .timeline-point.ai {
      background: var(--blue);
    }

    .timeline-point.ai.scoreboard_visible {
      background: var(--yellow);
    }

    .timeline-point.ai.athletes {
      background: var(--green);
    }

    .timeline-point.ocr {
      background: var(--green);
    }

    .timeline-clock-label {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      padding: 2px 5px;
      border: 1px solid rgba(31, 111, 91, 0.28);
      border-radius: 5px;
      background: #f1f7f4;
      color: var(--green-dark);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
      transition: box-shadow 120ms ease, transform 120ms ease;
    }

    .timeline-clock-label:hover,
    .timeline-clock-label.active {
      box-shadow: 0 0 0 2px rgba(31, 111, 91, 0.22);
      transform: translate(-50%, -50%) translateY(-1px);
    }

    .event-extract-button {
      min-height: 28px;
      padding: 0 9px;
      border-color: var(--green);
      background: var(--green);
      color: #fff;
      font-size: 12px;
      font-weight: 850;
    }

    .event-open-button {
      min-height: 28px;
      padding: 0 9px;
      font-size: 12px;
    }

    .event-delete-button {
      min-height: 28px;
      padding: 0 9px;
      color: var(--red);
      border-color: rgba(182, 64, 54, 0.35);
      font-size: 12px;
    }

    .admin-checkbox {
      border: 1px solid var(--line);
      background: #fafbf9;
      cursor: pointer;
    }

    .admin-checkbox input {
      width: 16px;
      height: 16px;
    }

    .flo-event-option {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 40px;
      padding: 9px 10px;
    }

    .flo-event-option span {
      color: var(--ink);
      font-size: 13px;
      font-weight: 700;
      text-transform: none;
    }

    .timeline {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      background: #fafbf9;
      display: grid;
      gap: 8px;
    }

    .timeline-bar {
      height: 10px;
      border-radius: 999px;
      background:
        linear-gradient(90deg,
          #dfe4dd 0 18%,
          var(--green) 18% 32%,
          #dfe4dd 32% 48%,
          var(--blue) 48% 62%,
          #dfe4dd 62% 78%,
          var(--yellow) 78% 88%,
          #dfe4dd 88% 100%);
    }

    .timeline-labels {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
    }

    @media (max-width: 1180px) {
      .layout {
        grid-template-columns: 220px minmax(0, 1fr);
      }

      .detail {
        grid-column: 1 / -1;
        position: static;
      }
    }

    @media (max-width: 860px) {
      .topbar {
        height: auto;
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .top-actions {
        justify-content: start;
      }

      .layout {
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .filters {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-strip {
        grid-template-columns: 1fr;
      }

      .match-grid {
        grid-template-columns: 1fr;
      }

      .admin-panel {
        grid-template-columns: 1fr;
      }

      .admin-event-grid {
        grid-template-columns: 1fr;
      }

      .admin-list-row {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .admin-list-meta,
      .admin-list-counts {
        grid-column: 1 / -1;
        justify-content: flex-start;
      }

      .admin-browser-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .integration-form {
        grid-template-columns: 1fr;
      }

      .job-queue-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .video-fact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .video-add-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .video-info-grid,
      .video-source-card:first-child {
        grid-template-columns: 1fr;
      }

      .video-source-media {
        min-height: 180px;
      }

      .video-admin-grid {
        grid-template-columns: 1fr;
      }

      .event-browser {
        grid-template-columns: 1fr;
      }

      .athlete-browser-body,
      .athlete-selected-head,
      .athlete-path-head {
        grid-template-columns: 1fr;
      }

      .athlete-page-layout {
        width: min(100% - 24px, 1540px);
      }

      .athlete-profile-hero,
      .athlete-identity-card {
        grid-template-columns: 1fr;
      }

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

      .athlete-identity-copy h1 {
        font-size: 48px;
      }

      .athlete-identity-card {
        min-height: 0;
      }

      .athlete-scope-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .athlete-scope-list.event-grouped {
        grid-template-columns: 1fr;
      }

      .athlete-scope-rail {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .event-public-overview,
      .event-bracket-picker-panel,
      .event-category-panels {
        grid-template-columns: 1fr;
      }

      .event-recommended-grid {
        grid-template-columns: 1fr;
      }

      .breadcrumb-picker,
      .match-shelf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .event-bracket-preview-head,
      .event-bracket-preview-top {
        align-items: start;
      }

      .event-match-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .event-match-filter.match-search {
        grid-column: 1 / -1;
      }

      .event-hero-panel {
        grid-template-columns: 1fr;
      }

      .match-hero-panel,
      .match-detail-grid {
        grid-template-columns: 1fr;
      }

      .match-athlete-grid {
        grid-template-columns: 1fr;
      }

      .bracket-support-grid {
        grid-template-columns: 1fr;
      }

      .event-action-row {
        justify-content: start;
      }

      .analysis-job-activity {
        grid-template-columns: 1fr;
      }

      .jobs-page-app .analysis-job-card {
        grid-template-columns: 1fr;
      }

      .jobs-page-app .analysis-job-card.work-item-card {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .jobs-page-app .analysis-job-card .event-row-actions {
        justify-content: start;
      }

      .jobs-page-app .analysis-job-card.work-item-card .event-row-actions {
        grid-column: 2;
        justify-content: start;
      }

      .analysis-job-tree-children {
        margin-left: 6px;
        padding-left: 8px;
      }

      .jobs-page-app .analysis-job-activity.compact-details {
        grid-template-columns: 1fr;
      }

      .analysis-worker-card {
        grid-template-columns: 1fr;
      }

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

      .athlete-source-form {
        grid-template-columns: 1fr;
      }

      .athlete-upcoming-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .filters {
        grid-template-columns: 1fr;
      }

      .section-head {
        align-items: start;
        flex-direction: column;
      }

      .detail-meta {
        grid-template-columns: 1fr;
      }

      .hero-info h1 {
        font-size: 27px;
      }

      .athlete-upcoming-card {
        grid-template-columns: 56px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 10px;
      }

      .athlete-upcoming-date {
        width: 56px;
      }

      .admin-event-grid {
        grid-template-columns: 1fr;
      }

      .admin-list-row {
        grid-template-columns: 1fr;
      }

      .admin-list-actions,
      .admin-list-counts {
        justify-content: flex-start;
      }

      .admin-browser-tools {
        grid-template-columns: 1fr;
      }

      .job-queue-stats {
        grid-template-columns: 1fr;
      }

      .video-fact-grid {
        grid-template-columns: 1fr;
      }

      .video-add-preview {
        grid-template-columns: 1fr;
      }

      .athlete-browser-toolbar,
      .athlete-match-group-head,
      .athlete-path-node {
        grid-template-columns: 1fr;
      }

      .athlete-achievement-group summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
      }

      .athlete-achievement-group summary .athlete-achievement-summary {
        grid-row: 2;
        grid-column: 2 / 4;
      }

      .athlete-achievement-group summary::after {
        grid-row: 1;
        grid-column: 3;
      }

      .athlete-achievement-events {
        padding-left: 8px;
      }

      .athlete-achievement-event-list-nested {
        padding-left: 8px;
      }

      .athlete-achievement-event {
        grid-template-columns: auto minmax(0, 1fr);
      }

      .athlete-achievement-actions {
        grid-column: 2;
        justify-content: flex-start;
      }

      .athlete-page-layout {
        width: min(100% - 20px, 1540px);
        padding-top: 10px;
      }

      .athlete-identity-card,
      .athlete-quick-panel {
        padding: 16px;
      }

      .athlete-avatar {
        width: 84px;
        height: 84px;
        font-size: 27px;
      }

      .athlete-identity-copy h1 {
        font-size: 38px;
      }

      .athlete-section-heading {
        align-items: start;
        flex-direction: column;
        gap: 5px;
      }

      .athlete-recommended-grid {
        grid-template-columns: 1fr;
      }

      .athlete-summary-grid,
      .athlete-scope-list,
      .athlete-match-card,
      .athlete-match-card-grid {
        grid-template-columns: 1fr;
      }

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

      .athlete-match-card {
        align-items: start;
      }

      .athlete-card-actions {
        justify-content: start;
      }

      .athlete-path-round,
      .athlete-path-node strong,
      .athlete-path-node > span:not(.athlete-path-round):not(.athlete-path-actions),
      .athlete-path-actions {
        grid-row: auto;
        grid-column: 1;
      }

      .athlete-path-node {
        min-height: 0;
      }

      .athlete-path-node:not(:last-child)::after {
        left: 22px;
      }

      .athlete-path-node:not(:last-child)::before {
        left: 18px;
      }

      .video-info-row {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      .video-source-copy h2 {
        font-size: 22px;
      }

      .event-match-row {
        grid-template-columns: 1fr;
      }

      .event-recommended-card {
        grid-template-columns: 96px minmax(0, 1fr);
      }

      .event-recommended-thumb {
        min-height: 104px;
      }

      .breadcrumb-picker,
      .match-shelf,
      .division-weight-grid,
      .division-quick-row {
        grid-template-columns: 1fr;
      }

      .event-public-layout {
        width: min(100% - 24px, 1580px);
        margin-block: 12px 36px;
      }

      .event-public-intro,
      .event-bracket-picker-panel {
        padding: 22px;
      }

      .event-public-intro {
        align-items: start;
        flex-direction: column;
      }

      .event-bracket-crumb:not(:last-child)::after {
        content: "";
      }

      .event-match-toolbar {
        grid-template-columns: 1fr;
      }

      .event-match-browser-summary,
      .event-match-group-head {
        align-items: start;
      }

      .event-match-group-head {
        grid-template-columns: minmax(0, 1fr) 24px;
      }

      .event-match-group-head::before {
        grid-column: 2;
      }

      .event-match-group-tags {
        grid-column: 1 / -1;
        justify-content: start;
      }

      .match-footage-card {
        grid-template-columns: 1fr;
      }

      .match-footage-time {
        justify-items: start;
        min-width: 0;
      }

      .event-row-actions {
        justify-content: start;
      }

      .manual-footage-grid {
        grid-template-columns: 1fr;
      }

      .timeline-layout {
        grid-template-columns: 1fr;
      }

      .timeline-canvas {
        min-width: var(--timeline-width, 560px);
      }

      .timeline-inspector {
        min-height: auto;
      }

      .timeline-scale {
        margin-left: 0;
      }

      .timeline-lane {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .timeline-lane-label {
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 8px;
      }

    }

@media (max-width: 900px) {
  .athlete-search-match-row {
    grid-template-columns: 46px minmax(0, 1fr) 22px;
  }

  .athlete-search-match-status {
    grid-column: 2;
    justify-content: flex-start;
  }

  .athlete-search-match-open {
    grid-row: 1 / span 2;
    grid-column: 3;
  }
}

@media (max-width: 560px) {
  .athlete-match-library-heading,
  .athlete-match-library-toolbar,
  .athlete-search-match-results {
    padding-left: 12px;
    padding-right: 12px;
  }

  .athlete-search-match-row {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    gap: 9px;
    padding: 11px 10px;
  }

  .athlete-search-match-order {
    width: 34px;
    height: 34px;
  }

  .athlete-search-match-copy strong {
    font-size: 15px;
  }

  .athlete-search-match-copy > span {
    white-space: normal;
  }

}