.lf-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	margin: 28px 0;
	border: 1px solid var(--lf-border-soft);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	background: #fff;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	cursor: grab;
	scrollbar-width: thin;
	scrollbar-color: var(--lf-purple) var(--lf-bg-soft);
}

.lf-table-scroll.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.lf-table-scroll.is-dragging * {
	pointer-events: none;
}

.lf-table-scroll:focus-visible {
	outline: 3px solid var(--lf-purple-light);
	outline-offset: 3px;
}

.lf-table-scroll::-webkit-scrollbar {
	height: 9px;
}

.lf-table-scroll::-webkit-scrollbar-track {
	background: var(--lf-bg-soft);
}

.lf-table-scroll::-webkit-scrollbar-thumb {
	background: var(--lf-purple);
	border: 2px solid var(--lf-bg-soft);
	border-radius: 999px;
}

.lf-table {
	width: 100%;
	min-width: var(--lf-table-min-width, 720px);
	border: 0;
	border-spacing: 0;
	border-collapse: separate;
	table-layout: auto;
	color: var(--lf-text);
	background: #fff;
	font-size: 14px;
	line-height: 1.7;
}

.lf-table caption {
	padding: 16px 20px;
	border-bottom: 1px solid var(--lf-border-soft);
	color: var(--lf-ink);
	font-size: 16px;
	font-weight: 800;
	text-align: right;
	background: var(--lf-bg-soft);
}

.lf-table__cell {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--lf-border-soft);
	vertical-align: middle;
	white-space: nowrap;
}

.lf-table__cell--right {
	text-align: right;
}

.lf-table__cell--center {
	text-align: center;
}

.lf-table__cell--left {
	text-align: left;
}

.lf-table thead .lf-table__cell {
	color: var(--lf-ink);
	background: var(--lf-purple-light);
	font-weight: 800;
}

.lf-table tbody tr:last-child .lf-table__cell {
	border-bottom: 0;
}

.lf-table--striped tbody tr:nth-child(even) .lf-table__cell {
	background: var(--lf-bg-soft);
}

.lf-table tbody tr:hover .lf-table__cell {
	background: #faf7ff;
}

.lf-table--compact .lf-table__cell {
	padding: 10px 14px;
}

.lf-table a {
	color: var(--lf-purple);
	text-decoration: none;
}

.lf-table a:hover {
	text-decoration: underline;
}

@media (max-width: 640px) {
	.lf-table-scroll {
		/*
		 * The table keeps its configured minimum width. Only this wrapper
		 * becomes horizontally scrollable on narrow screens.
		 */
		border-radius: var(--radius-lg);
	}
}