.tr-controls {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-lg);
      align-items: flex-end;
      margin-bottom: var(--space-xl);
      padding: var(--space-lg);
      background: var(--surface-1);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
    }
    .tr-control {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
      min-width: 160px;
    }
    .tr-control__label {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--green-bright, var(--green));
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
    }
    .tr-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .tr-pill {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--fog);
      background: var(--surface-2, var(--surface-1));
      border: 1px solid var(--border);
      padding: 0.55rem 0.95rem;
      border-radius: var(--radius-md);
      cursor: pointer;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      transition: color 200ms, border-color 200ms, background 200ms;
    }
    .tr-pill:hover {
      color: #ffffff;
      border-color: var(--green-dark, var(--green));
      background: var(--green-dark, var(--green));
    }
    .tr-pill.is-active {
      color: #ffffff !important;
      border-color: #0b3d2e !important;
      background: #0b3d2e !important;
      font-weight: var(--weight-semi);
    }
    .tr-select {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--chalk);
      background: var(--surface-2, var(--surface-1));
      border: 1px solid var(--border);
      padding: 0.55rem 0.9rem;
      border-radius: var(--radius-md);
      min-height: 42px;
    }
    .tr-meta {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--fog);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      margin: var(--space-md) 0 var(--space-lg);
    }
    .tr-meta__item strong {
      color: var(--chalk);
      font-weight: var(--weight-semi);
      margin-left: 0.35rem;
    }
    .tr-table-wrap {
      overflow-x: auto;
    }
    .tr-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-ui);
      min-width: 720px;
    }
    .tr-table thead th {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--fog);
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      text-align: left;
      padding: 14px 12px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-1);
    }
    .tr-table tbody td {
      padding: 14px 12px;
      border-bottom: 1px solid var(--border);
      color: var(--chalk);
      font-size: 0.92rem;
      vertical-align: middle;
    }
    .tr-table tbody tr:hover td {
      background: rgba(31, 164, 99, 0.06);
    }
    .tr-table__pos {
      font-family: var(--font-mono);
      color: var(--green);
      font-weight: var(--weight-semi);
      width: 56px;
    }
    .tr-table__player {
      color: var(--chalk);
      font-weight: var(--weight-semi);
    }
    .tr-table__player small {
      display: block;
      color: var(--fog);
      font-size: 0.72rem;
      font-weight: 400;
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: var(--tracking-wide);
      font-family: var(--font-mono);
    }
    .tr-table__num {
      font-family: var(--font-mono);
      text-align: right;
      color: var(--chalk);
    }
    .tr-table__avg {
      font-family: var(--font-mono);
      text-align: right;
      color: var(--green-bright, var(--green));
      font-weight: var(--weight-semi);
    }
    .tr-table tbody tr.is-unranked td {
      color: var(--fog);
    }
    .tr-table tbody tr.is-unranked .tr-table__pos {
      color: var(--fog);
    }
    .tr-empty {
      padding: var(--space-xl);
      text-align: center;
      color: var(--fog);
      font-family: var(--font-mono);
      font-size: 0.85rem;
      letter-spacing: var(--tracking-wide);
      text-transform: uppercase;
      border: 1px dashed var(--border);
      border-radius: var(--radius-md);
    }
    .tr-note {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--fog);
      margin-top: var(--space-md);
      letter-spacing: var(--tracking-wide);
    }
    .tr-share-bar {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      margin-top: var(--space-2xl);
    }
    @media (max-width: 700px) {
      .tr-controls {
        padding: var(--space-md);
        gap: var(--space-md);
      }
      .tr-control {
        min-width: 0;
        width: 100%;
      }
    }