.container {
  position: relative;
  z-index: 1;
  isolation: isolate;
  animation: fadeIn 0.2s ease-in-out;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-dark) !important;
  border: none !important;
}


.main {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 16px 28px;
  min-width: 0;
}

/* Di atas breakpoint mobile, halaman ini dulu cuma diregangkan penuh
   ke lebar layar (atau, di >=1200px, dipaksa masuk grid 2 kolom yang
   dijelaskan di bawah) -- di layar desktop biasa itu kelihatan
   berantakan: kartu-kartu melebar tipis atau kepotong jadi kolom yang
   gak nyambung. Dibatasi jadi satu kolom yang nyaman dibaca dan
   ditengahkan, sama seperti pola yang dipakai Notion/ChatGPT/Claude
   di layar lebar -- bukan meregangkan konten mobile ke seluruh layar. */
@media (min-width: 860px) {
  .main {
    max-width: 720px;
    margin: 0 auto;
  }
}


.view-slide-in {
  animation: viewSlideIn .32s cubic-bezier(.22, .9, .32, 1);
}
@keyframes viewSlideIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .view-slide-in { animation: none; }
}


.topbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  margin-bottom: 20px;
}


.loop-container {
  display: flex;
  justify-content: center;
  margin: 10px 0 8px;
}
.loop-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 20px;
  border-radius: 40px;
  background: var(--primary-tint-10);
  border: 1px solid var(--primary-tint-30);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}
.loop-status.online {
  border-color: var(--primary);
  background: var(--primary-tint-10);
  box-shadow: none;
}
.loop-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}


/* Dulu ada @media (min-width:1200px) yang memaksa .dashboard-grid jadi
   CSS Grid 2 kolom. Anak-anak #dashboardGrid (kartu input, panel log,
   panel laporan) bukan konten yang memang dirancang berdampingan --
   itu alur berurutan (isi topik -> lihat log -> baca laporan). Grid
   auto-placement tetap memecahnya jadi 2 kolom biar pun elemennya
   gak punya class "card", hasilnya kartu input dan log nempel
   berdampingan secara acak sementara panel laporan melebar penuh di
   bawahnya -- persis tampilan "berantakan" yang dilaporkan user di
   desktop. Dikembalikan ke satu kolom vertikal di semua lebar layar;
   .main di atas yang menangani pembatasan lebar & penengahan di layar
   lebar. */
.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


.card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  box-shadow: none !important;
}
.full-width {
  grid-column: 1 / -1;
}

.card > *:not(:last-child) {
  margin-bottom: 12px;
}

body.light .threshold-section {
  border: none !important;
}

@media (max-width: 768px) {
  body {
    font-size: var(--font-mobile) !important;
  }
  .card {
    padding: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .loop-status {
    padding: 3px 14px !important;
    font-size: 9px !important;
  }
  .loop-dot {
    width: 7px !important;
    height: 7px !important;
  }
}

@media (max-width: 480px) {
  .card {
    padding: 0 !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
  }
}

@media (hover: hover) and (pointer: fine) {
.card:hover {
  transform: none;
  box-shadow: none !important;
}
}

.kx-htext {
  color: var(--text-light) !important;
  text-shadow: none !important;
  letter-spacing: .2px !important;
  font-size: 15px !important;
}
.kx-slide {
  color: var(--text-dim);
  font-size: 12.5px;
}
.kx-iconrow {
  margin: 0;
}
.kx-rim {
  border-color: var(--border-color);
}
.kx-rim-in {
  background: var(--bg-panel);
}