:root {
    --rt-table-border: var(--rt-border-subtle);
    --rt-table-th-bg: linear-gradient(to bottom, var(--color-gray-100), var(--color-gray-200));
    --rt-table-hover-bg: var(--color-purple-50);
}

.table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--rt-table-border);
}

.table th {
    background: var(--rt-table-th-bg);
    padding: 8px 10px;
    border: 1px solid var(--rt-table-border);
    font-size: 11px;
    font-weight: bold;
    text-align: left;
}

.table td {
    padding: 10px;
    border: 1px solid var(--rt-table-border);
    font-size: 11px;
    vertical-align: top;
}

.table th:hover,
.table tr:hover {
    background: var(--rt-table-hover-bg);
}

@media (max-width: 800px) {
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}