:root {
      --primary: #1d4ed8;
      --primary-dark: #1e40af;
      --bg: #f1f5f9;
      --card: #ffffff;
      --border: #e2e8f0;
      --text: #0f172a;
      --muted: #64748b;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      padding: 16px;
    }

    .container { max-width: 1200px; margin: 0 auto; }

    header {
      text-align: center;
      margin-bottom: 24px;
      padding: 24px 16px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: #fff;
      border-radius: 14px;
    }
    header h1 { font-size: 1.6rem; margin-bottom: 6px; }
    header p { opacity: .9; font-size: .95rem; }

    .controls {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .tabs { display: flex; gap: 8px; }
    .tab-btn {
      padding: 10px 18px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: .2s;
    }
    .tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

    .search-box { flex: 1; min-width: 220px; position: relative; display: flex; }
    .search-box input {
      width: 100%;
      padding: 11px 40px 11px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      font-size: 1rem;
      outline: none;
    }
    .search-box input:focus { border-color: var(--primary); }
    .clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: #e2e8f0;
      color: #475569;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .clear-btn:hover { background: #cbd5e1; }
    .clear-btn.show { display: flex; }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .info { font-size: .9rem; color: var(--muted); }
    .per-page { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
    .per-page select {
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: .9rem;
      cursor: pointer;
      outline: none;
    }

    .table-wrap {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow-x: auto;
    }

    table { width: 100%; border-collapse: collapse; font-size: .9rem; }
    thead th {
      background: #f8fafc;
      text-align: left;
      padding: 12px 14px;
      border-bottom: 2px solid var(--border);
      white-space: nowrap;
      position: sticky;
      top: 0;
      cursor: pointer;
      user-select: none;
    }
    thead th:hover { background: #eef2ff; }
    tbody td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    tbody tr:hover { background: #f8fafc; }

    .badge {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 700;
      color: #fff;
      text-align: center;
      white-space: nowrap;
    }
    .badge-unggul { background: #16a34a; }
    .badge-baik-sekali, .badge-a { background: #2563eb; }
    .badge-baik, .badge-b { background: #0891b2; }
    .badge-c { background: #ea580c; }
    .badge-default { background: #64748b; }

    .link-btn {
      display: inline-block;
      padding: 5px 10px;
      background: #eef2ff;
      color: var(--primary);
      border-radius: 8px;
      text-decoration: none;
      font-size: .82rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .link-btn:hover { background: var(--primary); color: #fff; }

    /* Highlight pencarian (stabilo kuning) */
    .highlight {
      background: #fde047;
      color: #713f12;
      border-radius: 3px;
      padding: 0 2px;
      font-weight: 600;
    }

    .status {
      text-align: center;
      padding: 40px 20px;
      color: var(--muted);
    }
    .spinner {
      width: 38px; height: 38px;
      border: 4px solid var(--border);
      border-top-color: var(--primary);
      border-radius: 50%;
      margin: 0 auto 14px;
      animation: spin 1s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .error { color: #dc2626; }

    .pagination {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      justify-content: center;
      margin-top: 16px;
    }
    .page-btn {
      min-width: 38px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 8px;
      cursor: pointer;
      font-size: .9rem;
      font-weight: 600;
      color: var(--text);
    }
    .page-btn:hover:not(:disabled) { background: #eef2ff; border-color: var(--primary); }
    .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .page-btn:disabled { opacity: .4; cursor: not-allowed; }
    .page-ellipsis { padding: 8px 4px; color: var(--muted); }

    footer { text-align: center; margin-top: 24px; color: var(--muted); font-size: .85rem; }

    /* ====== RESPONSIVE DATA CARDS (HP/Tablet) ====== */
    @media (max-width: 768px) {
      /* Toolbar & kontrol tetap menumpuk rapi */
      .controls { flex-direction: column; align-items: stretch; }
      .tabs { justify-content: center; }
      .toolbar { flex-direction: column; align-items: stretch; }

      /* Hilangkan scroll horizontal & border kaku pada wrapper */
      .table-wrap {
        background: transparent;
        border: none;
        overflow: visible;
      }

      /* Sembunyikan header tabel asli */
      table thead { display: none; }

      table, table tbody, table tr, table td { display: block; width: 100%; }

      /* Tiap baris menjadi satu KARTU */
      table tr {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 6px 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
      }
      table tr:hover { background: var(--card); } /* nonaktifkan hover row di mode kartu */

      /* Tiap sel: label di kiri, nilai di kanan */
      table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        border-bottom: 1px dashed var(--border);
        text-align: right;
      }
      table tbody td:last-child { border-bottom: none; }

      /* Label otomatis dari atribut data-label */
      table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--muted);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .3px;
        text-align: left;
        flex: 0 0 auto;
        max-width: 45%;
      }

      /* Badge tetap rapi di sisi kanan */
      table tbody td .badge { white-space: nowrap; }

      /* Pagination tetap nyaman disentuh */
      .page-btn { padding: 10px 14px; }
    }