:root {
  --hnt-text: #0f172a;
  --hnt-muted: #64748b;
  --hnt-line: #e5e7eb;
  --hnt-bg: #ffffff;
  --hnt-card: #ffffff;
  --hnt-soft: #f8fafc;
  --hnt-radius: 16px;
}

/* --- Layout Utama --- */
.hnt-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 16px;
  color: var(--hnt-text);
  box-sizing: border-box;
}
.hnt-wrap--embed { padding: 0; }
.hnt-wrap * { box-sizing: border-box; }

/* --- Typography & Utils --- */
.hnt-small { font-size: 13px; }
.hnt-muted { color: var(--hnt-muted); }
.hnt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.hnt-breadcrumb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; }
.hnt-breadcrumb__sep { color: var(--hnt-muted); }
.hnt-breadcrumb__current { color: var(--hnt-muted); }

.hnt-h1 { font-size: 28px; margin: 0 0 6px; line-height: 1.2; }
.hnt-h2 { font-size: 18px; margin: 18px 0 10px; font-weight: 900; }
.hnt-h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

.hnt-p { margin: 0 0 10px; line-height: 1.7; }
.hnt-ul { margin: 0; padding-left: 18px; line-height: 1.7; }

.hnt-link { color: #0ea5e9; text-decoration: none; font-weight: 700; }
.hnt-link:hover { text-decoration: underline; }

/* --- Hero Section --- */
.hnt-hero {
  background: var(--hnt-card);
  border: 1px solid var(--hnt-line);
  border-radius: var(--hnt-radius);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}
.hnt-hero__left { flex: 1; min-width: 280px; }

/* KPI Grid */
.hnt-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 320px;
}
.hnt-kpi {
  border: 1px solid var(--hnt-line);
  border-radius: 14px;
  padding: 12px;
  background: var(--hnt-soft);
  text-align: center;
}
.hnt-kpi__label { font-size: 12px; color: var(--hnt-muted); }
.hnt-kpi__value { font-size: 18px; font-weight: 900; margin-top: 6px; }

/* --- Main Grid Layout --- */
.hnt-grid {
  display: grid;
  grid-template-columns: 1.7fr .9fr;
  gap: 16px;
  margin-top: 16px;
}
.hnt-grid--2 { grid-template-columns: 1fr 1fr; }

/* --- Cards & Boxes --- */
.hnt-card {
  background: var(--hnt-card);
  border: 1px solid var(--hnt-line);
  border-radius: var(--hnt-radius);
  padding: 16px;
  /* Penting: min-width 0 agar child element bisa scroll di dalam grid */
  min-width: 0; 
  width: 100%;
}
.hnt-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hnt-card__title { font-size: 16px; font-weight: 900; }

.hnt-box {
  border: 1px solid var(--hnt-line);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  margin-bottom: 10px;
}
.hnt-box--soft { background: var(--hnt-soft); }

/* --- Controls --- */
.hnt-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.hnt-controls__right { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.hnt-inp, .hnt-select {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--hnt-line);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}

.hnt-btn, .hnt-pagebtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hnt-line);
  text-decoration: none; color: var(--hnt-text); background: var(--hnt-bg);
  font-weight: 800; font-size: 14px; white-space: nowrap;
}
.hnt-pagelabel { color: var(--hnt-muted); font-size: 13px; font-weight: 700; display: flex; align-items: center; }

/* --- TABLE SCROLL FIX (Horizontal Scroll Only) --- */
.hnt-tablewrap {
  display: block;
  width: 100%;
  overflow-x: auto; /* Trigger scroll horizontal */
  -webkit-overflow-scrolling: touch; /* Smooth iOS */
  border: 1px solid var(--hnt-line);
  border-radius: 14px;
  margin-bottom: 16px;
  background: #fff;
}

.hnt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px; /* Force lebar tabel agar trigger scroll di HP */
}

.hnt-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  border-bottom: 1px solid var(--hnt-line);
  text-align: center;
  padding: 12px;
  white-space: nowrap; /* Teks header tidak turun */
  font-weight: 700;
  z-index: 2;
}

.hnt-table td {
  border-top: 1px solid var(--hnt-line);
  text-align: center;
  padding: 12px;
  white-space: nowrap; /* Teks isi tidak turun */
  color: #334155;
}

.hnt-table tr:nth-child(even) td { background: #fbfdff; }

/* Styles untuk tabel hub/mini */
.hnt-table--hub { min-width: 100%; } /* Tabel hub boleh fit screen kalau muat */
.hnt-table--hub th, .hnt-table--hub td { text-align: left; }
.hnt-table--mini th, .hnt-table--mini td { text-align: left; padding: 6px 10px; }

/* --- Navigation & Chips --- */
.hnt-pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.hnt-monthnav { margin: 10px 0 12px; }
.hnt-monthnav__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hnt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hnt-line);
  text-decoration: none; background: #fff; color: var(--hnt-text);
  font-size: 13px; font-weight: 700;
}
.hnt-chip:hover { background: var(--hnt-soft); }

/* --- Pool Grid --- */
.hnt-pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hnt-pool-card {
  display: block; text-decoration: none; color: var(--hnt-text);
  border: 1px solid var(--hnt-line); border-radius: 16px; padding: 14px; background: #fff;
}
.hnt-pool-card:hover { box-shadow: 0 10px 22px rgba(2,6,23,.06); transform: translateY(-1px); transition: all .15s ease; }
.hnt-pool-card__name { font-weight: 900; margin-bottom: 6px; }

.hnt-edu { margin: 16px 0; }

/* =========================================
   MOBILE RESPONSIVENESS FIXES
   ========================================= */

@media (max-width: 980px) {
  .hnt-wrap { padding: 40px 16px; }
  .hnt-grid { grid-template-columns: 1fr; }
  .hnt-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hnt-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .hnt-h1 { font-size: 24px; }
  
  /* Stack Hero */
  .hnt-hero { flex-direction: column; }
  .hnt-hero__left { width: 100%; margin-bottom: 10px; }
  
  /* KPI 1 Kolom tapi row layout */
  .hnt-kpis { grid-template-columns: 1fr; }
  .hnt-kpi { display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .hnt-kpi__value { margin-top: 0; }
  
  /* Controls Stack */
  .hnt-controls { flex-direction: column; align-items: stretch; }
  .hnt-controls__right { flex-direction: column; margin-left: 0; width: 100%; }
  .hnt-btn { width: 100%; text-align: center; }
  
  /* Pool Grid 1 Kolom */
  .hnt-pool-grid { grid-template-columns: 1fr; }
  
  /* Tabel otomatis scroll karena logic .hnt-tablewrap di atas */
}

/* --- Styles Tools --- */
.hnt-heatmap-grid {
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 8px; 
    margin-bottom: 24px;
}

/* --- MOBILE RESPONSIVE UPDATES --- */

@media (max-width: 980px) {
  .hnt-wrap { padding: 40px 16px; }
  .hnt-grid { grid-template-columns: 1fr; }
  .hnt-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hnt-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Heatmap jadi 2 kolom atau scrollable di HP */
  .hnt-heatmap-grid {
      grid-template-columns: repeat(5, minmax(40px, 1fr)); 
      overflow-x: auto; 
      padding-bottom: 5px; /* space for scrollbar */
  }

  .hnt-h1 { font-size: 24px; }
  
  /* Hero section stack */
  .hnt-hero { flex-direction: column; }
  .hnt-hero__left { width: 100%; margin-bottom: 10px; }
  
  /* KPI jadi 1 kolom di HP kecil biar angka gak kepotong */
  .hnt-kpis { grid-template-columns: 1fr; }
  .hnt-kpi { display: flex; justify-content: space-between; align-items: center; text-align: left; }
  .hnt-kpi__value { margin-top: 0; }

  /* Controls stack */
  .hnt-controls { flex-direction: column; align-items: stretch; }
  .hnt-controls__right { flex-direction: column; margin-left: 0; width: 100%; }
  .hnt-inp { width: 100%; min-width: 0; }
  .hnt-btn { width: 100%; text-align: center; }
  
  /* Pool grid 1 kolom */
  .hnt-pool-grid { grid-template-columns: 1fr; }
}

/* =========================================
   LEGACY STYLES (BK8) - Keep Safe
   ========================================= */
.bk8-togel-shortcode .hnt-wrapper { font-family: 'Roboto', sans-serif; max-width: 1200px; margin: auto; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.bk8-togel-shortcode .hnt-section { margin-bottom: 40px; text-align: center; }
.bk8-togel-shortcode .hnt-section-title { font-size: 20px; font-weight: 700; color: #0b62a4; margin-bottom: 15px; }
.bk8-togel-shortcode .lottery-table { width: 100%; border-collapse: collapse; margin-top: 20px; border: 1px solid #ddd; display: block; overflow-x: auto; white-space: nowrap; }
.bk8-togel-shortcode .lottery-table th, .bk8-togel-shortcode .lottery-table td { padding: 12px; border: 1px solid #ddd; text-align: center; }
.bk8-togel-shortcode .lottery-table th { background: #0b62a4; color: #fff; }
.bk8-togel-shortcode .hnt-prediction-box { background: #f9fafc; border: 2px solid #0b62a4; padding: 20px; border-radius: 10px; margin-top: 20px; color: #0b62a4; font-weight: 600; }
.bk8-togel-shortcode .hnt-simulation-box { background: #f9fafc; border: 2px solid #0b62a4; padding: 20px; border-radius: 10px; margin-top: 20px; }
.bk8-togel-shortcode input, .bk8-togel-shortcode select { padding: 10px; border: 1px solid #ccc; border-radius: 6px; width: 100%; margin-bottom: 10px; }
.bk8-togel-shortcode button { background: #0b62a4; color: #fff; padding: 12px; border: none; border-radius: 6px; width: 100%; cursor: pointer; }