.accounts-page-content {
    gap: calc(var(--section-padding) * 0.72);
}

.accounts-summary {
    margin-right: auto;
    color: var(--ink-muted);
    white-space: nowrap;
}

.accounts-table-panel {
    display: grid;
    gap: 0.85rem;
}

.accounts-table-wrap {
    background: var(--white);
}

.accounts-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.accounts-table th,
.accounts-table td {
    border-bottom: 1px solid var(--line);
}

.accounts-table thead th {
    padding: 0;
    background: var(--white);
    color: var(--ink-soft);
    font-size: 0.88em;
    font-weight: 400;
    text-align: left;
}

.accounts-table tbody tr:hover {
    background: #fafafa;
}

.accounts-table tbody tr:last-child td {
    border-bottom: 0;
}

.accounts-column-rank {
    width: 7%;
}

.accounts-column-account {
    width: 25%;
}

.accounts-column-activity {
    width: 17%;
}

.accounts-column-tournament-elo {
    width: 12%;
}

.accounts-column-performance {
    width: 18%;
}

.accounts-column-neutral {
    width: 7%;
}

.accounts-column-achievements {
    width: 7%;
}

.accounts-column-crystals {
    width: 7%;
}

.sort-button {
    width: 100%;
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.82rem 1rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.sort-button::after {
    content: "";
    width: 0;
    height: 0;
    margin-left: auto;
    border-right: 0.28rem solid transparent;
    border-bottom: 0.38rem solid currentColor;
    border-left: 0.28rem solid transparent;
    opacity: 0.2;
    transition: opacity 120ms ease, transform 120ms ease;
}

.sort-button-active {
    background: var(--lemon-tint);
    color: var(--ink);
}

.sort-button-active::after {
    opacity: 1;
}

.sort-button[data-direction="desc"]::after {
    transform: rotate(180deg);
}

.accounts-table td {
    padding: 0.9rem 1rem;
    vertical-align: middle;
}

.accounts-column-rank,
.accounts-rank-cell {
    text-align: center;
}

.accounts-column-rank .sort-button {
    justify-content: center;
}

.accounts-rank-cell,
.accounts-number-cell,
.accounts-tournament-elo-cell {
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    white-space: nowrap;
}

.accounts-rank-cell {
    color: var(--ink-soft);
}

.accounts-account-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    text-decoration: none;
}

.accounts-avatar-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    background: #efefef;
    overflow: hidden;
}

.accounts-avatar-slot-optin {
    border-color: rgba(76, 129, 255, 0.5);
    background: rgba(76, 129, 255, 0.14);
}

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

.accounts-avatar-fallback {
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 400;
}

.accounts-name-stack {
    display: grid;
    min-width: 0;
}

.accounts-name-line {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.accounts-name-text {
    overflow: hidden;
    color: var(--ink);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounts-admin-marker {
    width: 0.52rem;
    height: 0.52rem;
    flex: 0 0 auto;
    background: var(--lemon);
    transform: rotate(45deg);
}

.accounts-activity-layout,
.accounts-performance-layout {
    display: flex;
    align-items: center;
    gap: 0.82rem;
    min-width: 0;
}

.accounts-activity-dot {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
    border-radius: 999px;
}

.accounts-activity-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounts-activity-team-swatch {
    width: 1.7rem;
    height: 0.82rem;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
}

.accounts-rank-badge {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
}

.accounts-performance-count {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.accounts-number-cell {
    text-align: right;
}

.accounts-tournament-elo-cell {
    color: var(--ink-soft);
    text-align: right;
}

.accounts-empty {
    padding: 2.4rem 1rem;
    color: var(--ink-muted);
    text-align: center;
}

.accounts-pagination-row {
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.pagination-info {
    min-width: 11.5rem;
    color: var(--ink-muted);
    text-align: center;
}