.article .wrap .main .content table {
  position: relative !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 10px auto !important;
  min-width: 100% !important;
  text-align: center !important;
  border: 1px solid var(--color-border) !important;
}
.post-content table,
.markdown-body table,
.content table,
article table {
  position: relative !important;
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 10px auto !important;
  min-width: 100% !important;
  text-align: center !important;
  border: 1px solid var(--color-border) !important;
  margin-top: 20px !important;
}
.post-content table thead tr,
.markdown-body table thead tr,
.content table thead tr,
article table thead tr {
  background: transparent;
}
.post-content table thead th,
.markdown-body table thead th,
.content table thead th,
article table thead th {
  position: sticky !important;
  top: 0px !important;
  z-index: 10 !important;
  background: var(--color-text) !important;
  color: var(--color-background) !important;
  padding: 8px !important;
  text-align: center !important;
  font-weight: 600 !important;
  border: 1px solid var(--color-border) !important;
  cursor: pointer !important;
  user-select: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.post-content table thead th:hover,
.markdown-body table thead th:hover,
.content table thead th:hover,
article table thead th:hover {
  opacity: 0.85 !important;
}
.post-content table thead th.sortable::after,
.markdown-body table thead th.sortable::after,
.content table thead th.sortable::after,
article table thead th.sortable::after {
  content: ' ⇅';
  opacity: 0.7;
  margin-left: 5px;
  font-size: 0.9em;
}
.post-content table thead th.sortable:hover::after,
.markdown-body table thead th.sortable:hover::after,
.content table thead th.sortable:hover::after,
article table thead th.sortable:hover::after {
  opacity: 1;
}
.post-content table thead th.sort-asc::after,
.markdown-body table thead th.sort-asc::after,
.content table thead th.sort-asc::after,
article table thead th.sort-asc::after {
  content: ' ↑';
  opacity: 1;
}
.post-content table thead th.sort-desc::after,
.markdown-body table thead th.sort-desc::after,
.content table thead th.sort-desc::after,
article table thead th.sort-desc::after {
  content: ' ↓';
  opacity: 1;
}
.post-content table tbody tr,
.markdown-body table tbody tr,
.content table tbody tr,
article table tbody tr {
  transition: background 0.2s ease;
}
.post-content table tbody tr:hover,
.markdown-body table tbody tr:hover,
.content table tbody tr:hover,
article table tbody tr:hover {
  background-color: rgba(128,128,128,0.08);
}
.post-content table tbody td,
.markdown-body table tbody td,
.content table tbody td,
article table tbody td {
  padding: 5px !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  transition: background 0.2s ease;
}
@media (prefers-color-scheme: dark) {
  .post-content table tbody tr:hover,
  .markdown-body table tbody tr:hover,
  .content table tbody tr:hover,
  article table tbody tr:hover {
    background-color: rgba(128,128,128,0.12);
  }
}
.table-wrapper {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  margin: 1em 0;
  scrollbar-width: thin;
  scrollbar-color: var(--color-text) var(--color-border);
}
.table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: var(--color-border);
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-text);
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}
@media (max-width: 768px) {
  .post-content table,
  .markdown-body table,
  .content table,
  article table {
    font-size: 0.9em;
  }
  .post-content table thead th,
  .markdown-body table thead th,
  .content table thead th,
  article table thead th {
    padding: 6px !important;
  }
  .post-content table tbody td,
  .markdown-body table tbody td,
  .content table tbody td,
  article table tbody td {
    padding: 4px !important;
  }
}
