.root { min-width: 0; overflow-x: auto; }
.root table { width: 100%; min-width: 700px; border-collapse: collapse; }
.root th, .root td { padding: 13px 12px; border-bottom: 1px solid var(--page-rule); text-align: left; }
.root th { color: var(--page-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.root td { color: var(--page-ink); font-size: 12px; }
.root tbody tr { cursor: pointer; }
.root tbody tr:hover, .root tbody .selectedRow { background: var(--page-surface-2); }
.root tbody tr:focus-visible { outline: 2px solid var(--page-accent); outline-offset: -2px; }
.root tbody tr:last-child td { border-bottom: 0; }
.checkColumn { width: 40px; padding-right: 0 !important; padding-left: 0 !important; text-align: center !important; }
.checkColumn input { width: 15px; height: 15px; accent-color: var(--page-accent); }
.userCell { display: flex; align-items: center; gap: 10px; min-width: 205px; }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid var(--page-accent); border-radius: 50%; color: var(--page-accent); font-size: 10px; font-weight: 850; }
.userCell strong, .userCell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userCell strong { color: var(--page-ink); font-size: 12px; }
.userCell small { max-width: 180px; margin-top: 4px; color: var(--page-muted); font-size: 10px; }
.roleLabel, .mutedCell { color: var(--page-muted); font-size: 11px; white-space: nowrap; }
.statusLabel { display: inline-flex; align-items: center; gap: 6px; color: var(--page-ink); font-size: 10px; font-weight: 750; white-space: nowrap; }
.statusDot { width: 6px; height: 6px; border-radius: 50%; background: var(--page-accent); }
.statusLabel.inactive .statusDot { background: var(--page-muted); }
.rowActions { display: flex; justify-content: end; gap: 3px; }
.iconButton { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 1px solid transparent; background: transparent; color: var(--page-muted); }
.iconButton:hover { border-color: var(--page-rule); background: var(--page-surface); color: var(--page-accent); }
.dangerAction:hover { color: #b15a4c; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .root { overflow-x: visible; }
  .root table, .root tbody { display: block; min-width: 0; }
  .root thead { display: none; }
  .root tbody { padding: 4px 0; }
  .root tbody tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 8px; padding: 12px 0; border-bottom: 1px solid var(--page-rule); }
  .root tbody td { display: flex; align-items: center; min-height: 25px; padding: 3px 0; border: 0; }
  .root tbody td::before { width: 65px; flex: 0 0 65px; color: var(--page-muted); font-size: 9px; font-weight: 700; content: attr(data-label); }
  .root tbody .checkColumn { grid-row: span 3; align-items: start; padding-top: 8px; }
  .root tbody .checkColumn::before, .root tbody td[data-label="用户"]::before, .root tbody td[data-label="操作"]::before { display: none; }
  .root tbody td[data-label="用户"] { grid-column: 2 / 4; }
  .root tbody td[data-label="角色"], .root tbody td[data-label="状态"], .root tbody td[data-label="加入时间"], .root tbody td[data-label="最近更新"] { grid-column: 2 / 4; }
  .root tbody td[data-label="操作"] { grid-column: 3; grid-row: 1; align-self: start; }
  .userCell { min-width: 0; }
  .userCell small { max-width: 190px; }
}