:root{
    /* Dark red theme */
    --bg: #12080a;                 /* background utama (merah sangat gelap) */
    --bg-alt: #1a0d10;             /* background elemen (sedikit lebih terang) */
    --border: rgba(255,255,255,.08);
    --text: #f8eaea;               /* teks utama */
    --muted: #e0b6b6;              /* teks sekunder */
    --accent: #b91c1c;             /* merah aksen */
    --accent-weak: #7f1313;
  }
  
  *{ box-sizing: border-box; }
  
  html, body{
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  /* Layout container */
  .container{
    max-width: 1000px;
    margin: 24px auto;
    padding: 0 16px;
  }
  
  /* Heading */
  h1{
    margin: 0 0 4px;
    font-size: 22px;
    color: var(--text);
  }
  
  /* Meta info / subheading */
  .meta{
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px;
  }
  
  /* Table wrapper */
  .table-wrap{
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: auto;               /* horizontal scroll on mobile */
    background: var(--bg-alt);
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
  }
  
  /* Table */
  table{
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;               /* biar tidak terlalu sempit, tetap bisa di-scroll */
  }
  
  thead th{
    position: sticky;
    top: 0;
    background: linear-gradient(0deg, var(--bg-alt), var(--bg-alt)) padding-box,
                linear-gradient(90deg, var(--accent-weak), var(--accent)) border-box;
    color: var(--text);
    text-align: left;
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }
  
  th, td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;            /* jaga kerapihan, bisa diubah via media query */
  }
  
  tbody tr:hover td{
    background: rgba(185, 28, 28, .08);
  }
  
  /* Highlight saat update */
  tbody tr.flash td{
    animation: flash 1s;
  }
  @keyframes flash{
    0%{   background: rgba(220, 38, 38, .25); }
    100%{ background: transparent; }
  }
  
  .empty{
    padding: 24px;
    text-align: center;
    color: var(--muted);
  }
  
  /* ---- Form controls (opsional, jika ada select/button) ---- */
  select, button{
    background: var(--bg-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
  }
  button{
    cursor: pointer;
  }
  button.primary{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  button.primary:hover{
    filter: brightness(1.05);
  }
  
  /* Link (kalau dipakai) */
  a{ color: #fca5a5; text-decoration: none; }
  a:hover{ text-decoration: underline; }
  
  /* ---------- RESPONSIVE (Mobile-friendly) ---------- */
  @media (max-width: 720px){
    html, body{
      font-size: 15px;              /* sedikit lebih besar untuk keterbacaan */
    }
    .container{
      margin: 16px auto;
      padding: 0 12px;
    }
    h1{
      font-size: 20px;
    }
    th, td{
      padding: 10px 12px;           /* kompak di mobile */
    }
    table{
      min-width: 480px;             /* lebih kecil agar scroll tak terlalu jauh */
    }
  }
  
  @media (max-width: 480px){
    .container{
      padding: 0 10px;
    }
    h1{
      font-size: 18px;
    }
    .meta{
      font-size: 12px;
    }
    th, td{
      padding: 9px 10px;
    }
    /* Di layar sangat kecil, izinkan teks membungkus agar lebih hemat lebar */
    th, td{
      white-space: normal;
    }
  }