html {
      scroll-behavior: smooth;
    }

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background: #f8fbff;
}
.container {
  background: #f1f0f0;
  padding: 20px;
  border-radius: 10px;
}
.controls {
  margin-bottom: 15px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  background: #1d82ee;
  color: white;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even) {
  background: #f9f9f9;
}


/* Scroll buttons */
    .scroll-buttons {
      position: fixed;
      right: 20px;
      bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 999;
    }

    .scroll-buttons button {
      padding: 10px 14px;
      font-size: 14px;
      background-color: #3892f2;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      transition: background 0.3s ease;
    }

    .scroll-buttons button:hover {
      background-color: #2e83de;
    }