.header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0; font-family: var(--font-body); } .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .filterInput { width: 200px; } .filterSelect { width: 160px; } .tableWrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 12px; } .th { text-align: left; padding: 10px 12px; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--bg-raised); border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 1; } .row { cursor: pointer; transition: background 0.1s; } .row:hover { background: var(--bg-hover); } .td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; } .userCell { font-weight: 500; } .target { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty { padding: 32px; text-align: center; color: var(--text-faint); } .detailRow { background: var(--bg-raised); } .detailCell { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); } .detailGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .detailField { display: flex; flex-direction: column; gap: 4px; } .detailLabel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-family: var(--font-body); } .detailValue { font-size: 12px; color: var(--text-secondary); } .detailJson { display: flex; flex-direction: column; gap: 6px; } .pagination { display: flex; justify-content: center; margin-top: 16px; }