#table-container {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    border: 1px solid #e0ddd8; border-radius: 4px; background: #fff;
  }
  .table-nav {
    flex-shrink: 0; display: flex; justify-content: center; padding: 8px;
    background: #f8f6f2;
  }
  .table-nav-top { border-bottom: 1px solid #e0ddd8; }
  .table-nav-bottom { border-top: 1px solid #e0ddd8; }
  .table-pan-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 210px; padding: 6px 14px; font-family: monospace; font-size: 0.82rem;
    border: 1px solid #bbb; border-radius: 6px; background: #e8e4dc;
    color: #111; cursor: pointer;
  }
  .table-pan-btn:hover { background: #d8d4cc; }
  #table-scroll {
    flex: 1 1 auto; min-height: 0; overflow: auto;
  }
  #data-table {
    width: 100%; border-collapse: collapse; font-size: 0.78rem;
  }
  #data-table th,
  #data-table td {
    padding: 6px 9px; border-bottom: 1px solid #eeeae3;
    text-align: right; white-space: nowrap;
  }
  #data-table th:first-child,
  #data-table td:first-child {
    text-align: left; position: sticky; left: 0; z-index: 1; background: #fff;
  }
  #data-table thead th {
    position: sticky; top: 0; z-index: 2; background: #f8f6f2;
    color: #333; font-weight: 600; border-bottom: 1px solid #d8d5ce;
  }
  #data-table thead th:first-child { z-index: 3; background: #f8f6f2; }
  #data-table tbody tr:hover td { background: #faf9f5; }
  #data-table tbody tr:hover td:first-child { background: #faf9f5; }
  .missing-cell { color: #999; }