body {
      background: #0f0f0f;
      color: #e6e6e6;
      font-family: "Fira Code", monospace;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 1200px;
      margin: auto;
      padding: 20px;
    }
    h2 {
      text-align: center;
      margin-bottom: 5px;
      color: #00ff88;
      letter-spacing: 1px;
    }
    p {
      text-align: center;
      margin-bottom: 20px;
      color: #aaa;
    }
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      gap: 10px;
    }
    #searchInput {
      flex: 1;
      min-width: 180px;
      padding: 10px;
      border-radius: 6px;
      border: none;
      background: #1c1c1c;
      color: #e6e6e6;
      font-size: 14px;
    }
.btn {
  display: inline-flex;
  align-items: center;       /* agar icon dan teks sejajar vertikal */
  gap: 6px;                  /* jarak antara icon dan teks */
  padding: 10px 20px;
  background: #00ff88;
  color: #0f0f0f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

.btn:hover { background: #00cc66; }

.undo {
  display: inline-block;
  width: 20px; 
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' transform='matrix(0 1 1 0 0 2)'><path d='m8.54949429 2.5c-2.77910025-.01404818-5.48733216 1.42226095-6.97636172 4.0013358-2.209139 3.826341-.89813776 8.7190642 2.92820323 10.9282032s8.7190642.8981378 10.9282032-2.9282032.8981378-8.71906423-2.9282032-10.92820323' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round'/><path d='m11.5 2.5-3 2.5v-5z' fill='%23000000' fill-rule='nonzero'/><path d='m4.5 10.5h5v3' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

    .stats {
      font-size: 14px;
      color: #aaa;
    }
    .table-wrapper {
      overflow-x: auto;
      border-radius: 8px;
      border: 1px solid #222;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      min-width: 700px;
    }
    th, td {
      padding: 10px;
      border-bottom: 1px solid #222;
      text-align: left;
      white-space: nowrap;
    }
    th {
      background: #1a1a1a;
      color: #00ff88;
      cursor: pointer;
      position: sticky;
      top: 0;
      z-index: 2;
    }
    tr:hover {
      background: rgba(0,255,136,0.1);
    }
    tr:nth-child(even) {
      background: #141414;
    }
    .highlight {
      background: #004d33;
      color: #00ff88;
      font-weight: bold;
      padding: 2px 4px;
      border-radius: 3px;
    }
    .loading {
      text-align: center;
      padding: 20px;
      color: #00ff88;
      font-style: italic;
    }