/* Kunci lebar halaman ke lebar layar. Memakai 'clip', bukan 'hidden',
     karena 'hidden' akan membuat wadah gulir baru dan merusak header serta
     kolom Tanggal yang menempel. Tabel lebar tetap punya gulirnya sendiri. */
  html, body { max-width: 100%; overflow-x: clip; }

  body { background-color: #f8fafc; font-family: 'Inter', sans-serif; color: #0f172a; }
  .glass-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
  .badge-positive { background-color: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
  .badge-negative { background-color: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
  .badge-slate { background-color: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
  /* Sebelum digambar Chart.js, kanvas memakai lebar bawaan HTML 300px yang
     bisa meluber di layar sempit. Juga jadi pengaman bila CDN Chart.js
     gagal dimuat. */
  canvas { max-width: 100%; }

  /* Tabel matriks: header menempel saat digulir ke bawah, kolom Tanggal
     menempel saat digulir ke samping. border-collapse harus 'separate',
     karena dengan 'collapse' garis tepi hilang saat sel menempel. */
  .matrix-scroll { overflow: auto; max-height: 72vh; }
  .matrix-scroll table { border-collapse: separate; border-spacing: 0; }
  .matrix-scroll thead th { position: sticky; top: 0; z-index: 2; }
  .matrix-scroll tbody td:first-child { position: sticky; left: 0; z-index: 1; }
  /* Hanya sel pertama baris header pertama (Tanggal) yang menempel ke kiri.
     Pada tabel Shopee, sel itu memakai rowspan sehingga menutupi dua baris. */
  .matrix-scroll thead tr:first-child th:first-child { left: 0; z-index: 3; }

  /* Varian hanya-samping: kolom pertama menempel saat digulir ke samping,
     tinggi tabel dibiarkan apa adanya (tanpa header menempel). */
  .matrix-scroll-x { overflow-x: auto; }
  .matrix-scroll-x table { border-collapse: separate; border-spacing: 0; }
  .matrix-scroll-x thead th:first-child,
  .matrix-scroll-x tbody td:first-child { position: sticky; left: 0; z-index: 2; }

  /* --- User Guide: daftar menu yang bisa dibuka-tutup --- */
  .ug-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
  .ug-item > summary {
    cursor: pointer; list-style: none; user-select: none;
    padding: 13px 40px 13px 16px;
    font-size: 14px; font-weight: 700; color: #0f172a; position: relative;
  }
  .ug-item > summary::-webkit-details-marker { display: none; }
  .ug-item > summary::after {
    content: ''; position: absolute; right: 16px; top: 50%;
    width: 7px; height: 7px;
    border-right: 2px solid #64748b; border-bottom: 2px solid #64748b;
    transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
  }
  .ug-item[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
  .ug-item > summary:hover { background: #f8fafc; }
  .ug-body { padding: 2px 16px 16px; border-top: 1px solid #e2e8f0; }
  .ug-grp {
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #94a3b8; margin: 18px 0 8px;
  }
  .ug-grp:first-child { margin-top: 14px; }
  .ug-body dl { margin: 0; }
  .ug-body dt { font-size: 13px; font-weight: 600; color: #0f172a; margin-top: 11px; }
  .ug-body dt:first-of-type { margin-top: 0; }
  .ug-body dd { margin: 1px 0 0; font-size: 13px; color: #475569; line-height: 1.55; }
  .ug-rumus {
    display: inline-block; margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; color: #0f172a;
    background: #f1f5f9; border: 1px solid #e2e8f0;
    padding: 5px 9px; border-radius: 6px;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #f1f5f9; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }