/* =============================================================================
   LiveDraw Togel - design system
   Gaya terminal data: sudut siku, garis 1px, padat, tanpa bayangan.
   Token -> base -> layout -> komponen -> responsif
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  color-scheme: dark;
  --font: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui,
          -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --bg: #0b0d10;
  --bg-soft: #101318;
  --surface: #14171c;
  --surface-2: #191d23;
  --surface-3: #222730;
  --line: #272c35;
  --line-2: #363d49;
  --text: #e6e9ee;
  --dim: #98a0ac;
  --mute: #6b7280;

  /* Antarmuka dibiarkan netral. Warna hanya dipakai sebagai sinyal data
     (status pasaran) dan pada tombol utama. Semua tint solid, bukan rgba. */
  --fill: #e6e9ee;
  --fill-on: #14171c;

  --accent: #1fc978;
  --accent-ink: #35d98c;
  --accent-soft: #142a20;
  --accent-on: #04180d;

  --amber: #f5b431;
  --amber-soft: #2b2114;
  --blue: #4f8cf7;
  --blue-soft: #161e2f;
  --red: #f0616d;
  --red-soft: #2c171b;

  --header-h: 52px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

/* Elemen yang disembunyikan JS memakai [hidden]; kalahkan display komponen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; }
a { color: inherit; }

:where(a, button, input, select):focus-visible { outline: 1px solid var(--blue); outline-offset: -1px; }

.wrap { width: min(1360px, 100% - 24px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}

/* ---------- 2b. Scrollbar ---------- */
/* Satu gaya untuk semua area yang bisa digulir, termasuk widget di dalam
   iframe. Thumb memakai border transparan + background-clip agar tetap rapi
   di latar mana pun, tanpa perlu mencocokkan warna permukaan induknya. */
.market-list, .table-scroll, .code-box code, .code-cell code {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.market-list::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.code-box code::-webkit-scrollbar,
.code-cell code::-webkit-scrollbar { width: 10px; height: 10px; }

.market-list::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.code-box code::-webkit-scrollbar-track,
.code-cell code::-webkit-scrollbar-track { background: transparent; }

.market-list::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.code-box code::-webkit-scrollbar-thumb,
.code-cell code::-webkit-scrollbar-thumb {
  background: var(--line-2); border: 3px solid transparent; background-clip: content-box;
}
.market-list::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.code-box code::-webkit-scrollbar-thumb:hover,
.code-cell code::-webkit-scrollbar-thumb:hover {
  background: var(--mute); background-clip: content-box;
}

/* Titik status tetap bulat: penanda, bukan sudut komponen. */
.dot-live, .market-list a i, .pill i, .ticker-item i { border-radius: 50%; }

/* ---------- 3. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-soft); border-bottom: 1px solid var(--line);
}

.header-bar { min-height: var(--header-h); display: flex; align-items: center; gap: 12px; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-right: auto; }
/* Logo sudah membawa warnanya sendiri, jadi tidak diberi latar. Lebar
   dibiarkan mengikuti rasio gambar yang memanjang. */
.brand-mark { display: block; flex: none; width: auto; height: 28px; }
.brand-text { display: grid; }
.brand-text b { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
.brand-text b i { font-style: normal; color: var(--text); }
.brand-text span { font-size: 9.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
/* Kursor ketik. Lebar tagline dikunci lewat JS supaya header tidak bergeser
   saat teksnya memanjang dan memendek. */
[data-typing] { white-space: nowrap; }
[data-typing]::after {
  content: ""; display: inline-block; width: 1px; height: .95em; margin-left: 2px;
  vertical-align: -1px; background: var(--accent);
  animation: caret 1s step-end infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.header-tools { display: flex; align-items: center; gap: 0; }

.clock {
  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 11px; font-weight: 600; color: var(--dim);
}
.clock time { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.clock span { color: var(--mute); }

.dot-live { flex: none; width: 7px; height: 7px; background: var(--accent); animation: pulse 2.2s ease-in-out infinite; }

/* Tombol utama: isian hijau solid, tanpa keadaan hover. */
.cta-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 30px; padding: 0 12px;
  margin-right: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-on); font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.cta-btn svg { width: 14px; height: 14px; }

/* ---------- 4. Ticker ---------- */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface); }
.ticker-track { display: flex; width: max-content; animation: slide 90s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; white-space: nowrap;
  text-decoration: none; font-size: 11px; color: var(--dim); border-right: 1px solid var(--line);
}
.ticker-item i { width: 5px; height: 5px; flex: none; }
.ticker-item:hover { color: var(--text); background: var(--surface-3); }
.ticker-item b { font-weight: 600; letter-spacing: .02em; }
.ticker-item u {
  text-decoration: none; font-family: var(--mono); font-weight: 700; letter-spacing: .08em; color: var(--text);
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 5. Layout ---------- */
.ad-slot { margin-top: 12px; line-height: 0; border: 1px solid var(--line); }
.ad-slot img { display: block; width: 100%; height: auto; object-fit: cover; }
/* Rasio dikunci lewat CSS: atribut width/height pada <source> belum dipakai
   semua browser untuk menghitung tinggi. */
@media (max-width: 640px) { .ad-slot img { aspect-ratio: 320 / 100; } }

.shell {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 12px; padding: 12px 0 28px; align-items: start;
}
/* minmax(0,1fr) mencegah satu anak yang terlalu lebar meregangkan seluruh
   kolom dan membuat halaman bisa digulir menyamping. */
.content { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }

.notice {
  padding: 9px 13px; border: 1px solid var(--red); border-left-width: 3px;
  background: var(--red-soft); font-size: 12.5px;
}

/* ---------- 6. Sidebar ---------- */
.sidebar {
  position: sticky; top: calc(var(--header-h) + 12px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.sidebar-head strong { font-size: 11px; font-weight: 700; color: var(--dim); }

.search { position: relative; border-bottom: 1px solid var(--line); }
.search svg { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 13px; height: 13px; color: var(--mute); }
.search input {
  width: 100%; padding: 9px 10px 9px 30px; font: inherit; font-size: 12px; color: var(--text);
  border: 0; background: transparent; outline: none;
}
.search input::placeholder { color: var(--mute); }
.search input:focus { background: var(--surface-2); }

.market-list {
  display: flex; flex-direction: column;
  overflow-y: auto; max-height: min(62vh, 640px);
}
.market-list a {
  display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 7px 12px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--dim);
  font-size: 11.5px; font-weight: 600; transition: background .12s, color .12s;
}
.market-list a i { width: 7px; height: 7px; background: var(--mute); }
.market-list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-list a small { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--mute); }
.market-list a:hover { color: var(--text); background: var(--surface-3); }
.market-list a.active { color: var(--text); background: var(--surface-3); box-shadow: inset 2px 0 0 var(--fill); }
.market-list a.active small { color: var(--dim); }
.no-hit { padding: 14px 12px; font-size: 12px; color: var(--mute); text-align: center; }

.s-done { background: var(--accent) !important; }
.s-live { background: var(--amber) !important; animation: pulse 1.6s ease-in-out infinite; }
.s-wait { background: var(--blue) !important; }
.s-late { background: var(--red) !important; }
/* Libur dipindah ke abu: hari libur adalah keadaan paling tidak ada kejadian,
   jadi warna paling menarik perhatian disimpan untuk result yang telat. */
.s-off  { background: var(--mute) !important; }

.sidebar-foot {
  padding: 7px 12px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
}

.scrim { display: none; }

/* ---------- 7. Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 18px 20px; border: 1px solid var(--line); background: var(--surface);
}
/* Hero berlatar foto. Gambar dibiarkan tampak di kanan lalu meluruh ke gelap
   di kiri tempat teks berada, jadi keterbacaan tidak bergantung pada bagian
   foto mana yang kebetulan terpotong. Tiap halaman memakai fotonya sendiri. */
.hero-home, .hero-market, .hero-widget {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  background-color: var(--surface);
}
.hero-home { background-image: var(--veil), url("hero-home.webp"); }
.hero-widget { background-image: var(--veil), url("hero-widget.webp"); }
/* Hero pasaran memakai tabir lebih pekat karena ada bola result di atasnya
   yang harus tetap menonjol dari foto. */
.hero-market { background-image: var(--veil-strong), var(--hero-img); }

:root {
  --veil: linear-gradient(100deg,
    rgba(20, 23, 28, .98) 0%, rgba(20, 23, 28, .95) 30%,
    rgba(20, 23, 28, .74) 58%, rgba(20, 23, 28, .40) 100%);
  --veil-strong: linear-gradient(100deg,
    rgba(20, 23, 28, .99) 0%, rgba(20, 23, 28, .96) 32%,
    rgba(20, 23, 28, .82) 62%, rgba(20, 23, 28, .58) 100%);
  --veil-mobile: linear-gradient(180deg,
    rgba(20, 23, 28, .96) 0%, rgba(20, 23, 28, .88) 42%, rgba(20, 23, 28, .58) 100%);
}

/* Panel di atas foto dibuat semi transparan agar fotonya tetap terbaca. */
.hero-home .waiting, .hero-market .hero-next {
  background: rgba(19, 22, 27, .78);
  backdrop-filter: blur(7px);
}
.hero-home .waiting { border-color: var(--line-2); }

.hero h1 { margin: 6px 0 10px; font-size: clamp(21px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.01em; }
.hero > div > p { color: var(--dim); }

/* Hero halaman pasaran: keterangan, angka result, lalu bilah hitung mundur.
   Padding dipindah ke tiap bagian agar angka bisa melebar penuh di mobile. */
.hero-market {
  gap: 0; padding: 0;
  grid-template-areas: "info value" "next next";
}
.hero-info { grid-area: info; padding: 18px 20px; }
.hero-value { grid-area: value; padding: 18px 20px; }
/* Baris label hanya berisi bendera dan eyebrow. Pill status dipindah ke sebelah
   nama pasaran: di sini ia bersebelahan dengan "Result Terbaru" sehingga kata
   "Result" terbaca dua kali, dan di layar sempit keduanya pecah jadi dua baris. */
.hero-top { display: flex; align-items: center; gap: 8px; }
/* Pill mengambil garis dasar judul sebagai jangkar, bukan tepi kolom teks
   yang tidak terlihat mata. */
.hero-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero-title h1 { margin: 0; }
/* Rasio bendera berbeda-beda, jadi hanya tingginya yang dipatok. */
.hero-flag { display: block; flex: none; height: 15px; width: auto; border: 1px solid var(--line-2); }
.hero-market .hero-title { margin: 7px 0 6px; }
.hero-sub { font-size: 12.5px; }
.hero-sub b { color: var(--text); font-weight: 700; }
.hero-next {
  grid-area: next; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  padding: 7px 20px; border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 11.5px; color: var(--mute);
}
/* Foto Commons berlisensi CC yang mewajibkan atribusi, jadi kreditnya melekat
   pada halaman yang memakai fotonya. */
.hero-credit {
  margin-left: auto; font-size: 9.5px; color: var(--mute); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero-credit:hover { color: var(--dim); }
.hero-next .countdown { margin-left: 5px; font-size: 12px; }

.meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--dim);
}
.chip b { color: var(--text); font-weight: 700; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid transparent; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.pill i { width: 6px; height: 6px; background: currentColor; }
.pill-done { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent); }
.pill-live { color: var(--amber); background: var(--amber-soft); border-color: var(--amber); }
.pill-live i { animation: pulse 1.4s ease-in-out infinite; }
.pill-wait { color: var(--blue); background: var(--blue-soft); border-color: var(--blue); }
.pill-late { color: var(--red); background: var(--red-soft); border-color: var(--red); }
.pill-off { color: var(--mute); background: var(--surface-3); border-color: var(--line-2); }

/* ---------- 8. Angka result ---------- */
/* Bola biliar: resep dipakai bersama oleh hero pasaran dan kartu papan.
   Lapisan dari atas ke bawah: kilau, lingkaran putih tempat angka, cahaya
   lembut, lalu badan bola. */
.big-digits b {
  border-radius: 50%; color: #16181c; background-color: transparent;
  background-image:
    radial-gradient(circle at 33% 25%, rgba(255, 255, 255, .85) 0 4%, rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 50% 50%, #f7f7f4 0 33%, rgba(0, 0, 0, 0) 34%),
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle at 50% 50%, var(--ball, #4a515e) 0 60%, var(--ball-d, #2a2f38) 100%);
}

/* Peta warna bola biliar. Ditaruh pada b[data-d] supaya satu daftar melayani
   hero maupun kartu papan; custom property tidak berefek apa pun di elemen
   yang tidak memakai resep di atas. */
b[data-d="0"] { --ball: #4a515e; --ball-d: #2a2f38; }
b[data-d="1"] { --ball: #f0b310; --ball-d: #a8770a; }
b[data-d="2"] { --ball: #2563d8; --ball-d: #16408f; }
b[data-d="3"] { --ball: #d63030; --ball-d: #8d1c1c; }
b[data-d="4"] { --ball: #7d3fae; --ball-d: #4f2670; }
b[data-d="5"] { --ball: #ea7a1e; --ball-d: #9c4d0c; }
b[data-d="6"] { --ball: #149257; --ball-d: #0b5d37; }
b[data-d="7"] { --ball: #90322f; --ball-d: #5c1d1b; }
b[data-d="8"] { --ball: #23262c; --ball-d: #101216; }
b[data-d="9"] { --ball: #b23a80; --ball-d: #72224f; }

/* justify-self menahan deret bola agar tidak melar saat hero jadi satu kolom. */
.big-digits { display: flex; flex-wrap: wrap; justify-self: start; gap: 10px; }
.big-digits b {
  display: grid; place-items: center; width: 68px; height: 68px;
  font: 700 23px/1 var(--mono); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .45);
  animation: reveal .32s ease backwards;
}
.big-digits b:nth-child(2) { animation-delay: .05s; }
.big-digits b:nth-child(3) { animation-delay: .1s; }
.big-digits b:nth-child(4) { animation-delay: .15s; }
.big-digits b:nth-child(5) { animation-delay: .2s; }
.big-digits b:nth-child(6) { animation-delay: .25s; }

/* align-self mencegah kotak angka ikut melar mengisi lebar kartu. */
.digits { display: inline-flex; align-self: flex-start; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.digits b {
  display: grid; place-items: center; min-width: 30px; height: 34px; padding: 0 3px;
  background: var(--surface-2); color: var(--dim);
  font: 700 17px var(--mono); font-variant-numeric: tabular-nums;
}
.digits.is-today b { color: var(--text); }
.digits.is-muted b { color: var(--mute); }

/* ---------- 9. Status menunggu ---------- */
.waiting {
  display: flex; align-items: center; gap: 13px; min-width: 280px; padding: 14px 16px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.waiting strong { display: block; font-size: 13.5px; }
.waiting p { font-size: 12px; color: var(--dim); }
.spinner { position: relative; flex: none; width: 34px; height: 34px; }
.spinner::before, .spinner::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line-2);
}
.spinner::after { border-color: transparent; border-top-color: var(--text); animation: spin 1s linear infinite; }
.dots i { font-style: normal; opacity: .2; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }

.countdown {
  font-family: var(--mono); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums;
}

/* ---------- 10. Statistik ---------- */
/* Garis dibuat dari border tiap sel, bukan gap berlatar, agar sel kosong di
   baris terakhir tidak menyisakan blok abu. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  border: 1px solid var(--line); border-right: 0; border-bottom: 0; background: var(--surface);
}
.stat { padding: 10px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.stat strong { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; }
.stat strong.mono { font-family: var(--mono); letter-spacing: .08em; color: var(--text); }

/* ---------- 11. Papan pasaran ---------- */
.section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--line); border-bottom: 0; background: var(--surface-2);
}
.section-head h2 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.filters { display: flex; flex-wrap: wrap; gap: 0; }
.filters button {
  padding: 4px 10px; margin-left: -1px; border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 11px; font-weight: 600; color: var(--dim); cursor: pointer;
  transition: color .12s, background .12s;
}
.filters button:hover { color: var(--text); background: var(--surface-3); }
.filters button[aria-pressed="true"] { color: var(--fill-on); background: var(--fill); border-color: var(--fill); }
.filters button b { margin-left: 4px; font-family: var(--mono); font-size: 10px; opacity: .7; }

/* Papan result berbentuk baris watchlist. Angka disejajarkan pada kolom yang
   sama antar pasaran, jadi mata cukup menyusuri satu garis lurus untuk
   membandingkan 39 pasaran sekaligus. */
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  border: 1px solid var(--line); border-right: 0; border-bottom: 0; background: var(--surface);
}
.mrow {
  display: grid; grid-template-columns: 7px 38px minmax(0, 1fr) auto auto;
  align-items: center; gap: 9px; padding: 8px 12px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface); text-decoration: none; color: inherit;
  transition: background .12s;
}
.mrow:hover { background: var(--surface-3); }
.mrow.is-current { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--fill); }
.mrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.mrow-time { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--mute); }
.mrow-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--dim);
}
.mrow:hover .mrow-name { color: var(--text); }
.mrow-note {
  font-style: normal; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mute);
}
.mrow-note.is-live { color: var(--amber); }
.mrow-note.is-wait { color: var(--blue); }
.mrow-note.is-late { color: var(--red); }
.mrow-note.is-off { color: var(--mute); }
.mrow-num {
  font: 700 15px var(--mono); letter-spacing: .1em; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.mrow-num.is-fresh { color: var(--text); }
.mrow-num.is-empty { color: var(--line-2); }

/* ---------- 12. Panel & tabel ---------- */
.panel { border: 1px solid var(--line); background: var(--surface); }
.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.panel-head .count { font-family: var(--mono); font-size: 11px; color: var(--mute); }

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  padding: 6px 14px; text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
tbody td { padding: 6px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--surface-3); }
td.num { font-family: var(--mono); color: var(--mute); font-size: 11.5px; }
td.day { color: var(--dim); }
.result-code {
  font: 700 14px var(--mono); letter-spacing: .14em; color: var(--text); font-variant-numeric: tabular-nums;
}
.badge-new {
  margin-left: 8px; padding: 1px 5px; border: 1px solid var(--accent); color: var(--accent);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

.empty { padding: 34px 14px; text-align: center; color: var(--mute); font-size: 12.5px; }
.empty strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--text); }

/* ---------- 12b. Kode embed ---------- */
.embed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.embed-info { padding: 14px; border-right: 1px solid var(--line); }
.embed-info > p { font-size: 12.5px; color: var(--dim); }

.code-box {
  display: flex; align-items: stretch; gap: 0; margin: 11px 0 9px;
  border: 1px solid var(--line); background: var(--bg);
}
.code-box code {
  flex: 1; min-width: 0; padding: 9px 11px; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; color: var(--text);
}
.copy-btn {
  flex: none; padding: 0 14px; border: 0; border-left: 1px solid var(--line);
  background: var(--surface-3); color: var(--text); font: inherit; font-size: 11.5px;
  font-weight: 700; cursor: pointer; transition: background .12s, color .12s;
}
.copy-btn:hover { background: var(--line-2); color: var(--text); }
.copy-btn.is-done { background: var(--accent); color: var(--accent-on); }

.embed-note { font-size: 11.5px; color: var(--mute); }
.embed-note code { font-family: var(--mono); color: var(--dim); }

.spec { margin: 12px 0 0; border-top: 1px solid var(--line); }
.spec > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.spec dt { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.spec dd { margin: 0; font-size: 12px; color: var(--dim); }
.spec dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.spec dd a:hover { border-bottom-color: var(--dim); }

.embed-preview { padding: 14px; background: var(--surface-2); }
.embed-preview iframe { display: block; width: 100%; margin-top: 7px; border: 0; }
a.count { text-decoration: none; color: var(--dim) !important; }
a.count:hover { color: var(--text) !important; }

/* ---------- 12b2. Statistik & prediksi ---------- */
.stat-meta {
  padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-size: 11.5px; color: var(--mute);
}
.stat-meta b { color: var(--text); }
.stat-warn { display: block; color: var(--amber); }

/* Empat blok berbagi satu baris; flex-wrap membiarkannya melipat sendiri saat
   ruang menyempit. Margin negatif menaruh border blok terakhir tepat di garis
   panel, sehingga tepinya tidak jadi garis dobel berapa pun jumlah kolomnya. */
.stat-cols { display: flex; flex-wrap: wrap; margin-right: -1px; }
.stat-block {
  display: flex; flex-direction: column;
  flex: 1 1 190px; min-width: 0; padding: 12px 14px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat-block.is-chart { flex: 2 1 330px; }
.stat-block.is-tend { flex: 1 1 200px; }
.stat-block .eyebrow { flex: none; margin-bottom: 8px; }
.stat-block > p { flex: none; margin-top: 7px; font-size: 11px; color: var(--mute); }

/* Semua blok setinggi baris, jadi isinya dibuat memenuhi sisa ruang. Tanpa ini
   blok pendek seperti Angka Main menyisakan area kosong di bawahnya. */
.stat-block .digits, .stat-block .pos-list, .stat-block .tend, .stat-block .freq {
  flex: 1; margin: 0;
}
.stat-block .digits { align-self: stretch; }
.stat-block .digits b { flex: 1; min-width: 0; height: auto; font-size: 24px; }

.pos-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.pos-list > div { display: grid; align-content: center; padding: 6px 4px; background: var(--surface); text-align: center; }
.pos-list dt { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
.pos-list dd { margin: 2px 0 0; font: 700 19px var(--mono); color: var(--text); }
.pos-list dd small { display: block; font: 600 9.5px var(--font); color: var(--mute); }

/* Satu kolom empat baris supaya tingginya sejajar dengan grafik di sebelahnya. */
.tend {
  display: grid; grid-auto-rows: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.tend > div {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 9px; background: var(--surface);
}
.tend span { font-size: 11px; color: var(--dim); }
.tend b { font: 700 13px var(--mono); }

/* Digit yang masuk angka main disorot hijau: satu-satunya sinyal warna di sini. */
.freq {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.freq-col {
  display: grid; grid-template-rows: auto minmax(34px, 1fr) auto; gap: 5px;
  justify-items: center; padding: 8px 2px 6px; background: var(--surface);
}
.freq-col b { font: 700 11px var(--mono); color: var(--mute); }
.freq-track { display: flex; align-items: flex-end; width: 100%; }
.freq-track i { width: 100%; min-height: 2px; background: var(--line-2); }
.freq-col em { font: 700 12px var(--mono); font-style: normal; color: var(--dim); }
.freq-col.is-top b, .freq-col.is-top em { color: var(--accent-ink); }
.freq-col.is-top .freq-track i { background: var(--accent); }

.stat-note {
  padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; line-height: 1.5; color: var(--mute);
}

/* ---------- 12c. Halaman widget ---------- */
.shell.one-col { grid-template-columns: minmax(0, 1fr); }
.shell.one-col .hero { grid-template-columns: minmax(0, 1fr); }

.code-table td { vertical-align: middle; }
.code-table td:first-child { white-space: nowrap; }
.code-market { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.code-market i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.code-market span { font-weight: 700; }
.code-market:hover span { color: var(--text); }
.code-table td small { display: block; margin-left: 15px; font-family: var(--mono); font-size: 10px; color: var(--mute); }

.code-cell { width: 100%; max-width: 0; }
.code-cell code {
  display: block; padding: 5px 9px; overflow-x: auto; white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg);
  font-family: var(--mono); font-size: 11px; color: var(--text);
}
.copy-btn.is-inline { height: 28px; padding: 0 12px; border: 1px solid var(--line); }

.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.faq > div { padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq strong { display: block; margin-bottom: 4px; font-size: 12.5px; }
.faq p { font-size: 12px; color: var(--dim); }
.faq code { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* ---------- 13. Paginasi ---------- */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-top: 1px solid var(--line); background: var(--surface-2);
}
/* Tampilan tombol menempel pada komponennya sendiri, bukan pada .pagination,
   karena .page-dir juga dipakai di luar blok paginasi. */
.page-dir {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  font-size: 11px; font-weight: 700; text-decoration: none;
  transition: color .12s, background .12s;
}
.page-dir:hover { color: var(--text); background: var(--surface-3); }
.page-dir.disabled { opacity: .35; pointer-events: none; }
.page-numbers { display: flex; }
.page-numbers a {
  display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; margin-left: -1px;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  font-family: var(--mono); font-size: 11px; font-weight: 700; text-decoration: none;
}
.page-numbers a:hover { color: var(--text); background: var(--surface-3); }
.page-numbers a.active { color: var(--fill-on); background: var(--fill); border-color: var(--fill); }

/* ---------- 14. Footer ---------- */
.site-footer { margin-top: 4px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(0, 1fr)); gap: 24px; padding: 22px 0 18px; }
.footer-grid h4 { margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.footer-grid p { font-size: 12px; color: var(--dim); }
.footer-links { display: grid; gap: 5px; }
.footer-links a { font-size: 12px; color: var(--dim); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-bar {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
  padding: 7px 0; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
}

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .06em;
}

/* ---------- 14b. Bilah status bawah (mobile) ---------- */
.mobile-bar { display: none; }
.mobile-bar button, .mobile-bar a {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 11px;
  border: 1px solid var(--line); background: var(--surface); color: var(--dim);
  font: inherit; font-size: 11.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.mobile-bar button:active, .mobile-bar a:active { background: var(--surface-3); color: var(--text); }
.mobile-bar svg { width: 14px; height: 14px; }
.mb-next {
  display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0;
  font-size: 10.5px; color: var(--mute);
}
.mb-next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font-weight: 700; }
.mb-next .countdown { flex: none; font-size: 11.5px; }
.breadcrumb a { text-decoration: none; color: var(--dim); }
.breadcrumb a:hover { color: var(--text); }

/* ---------- 15. Animasi ---------- */
@keyframes pulse { 50% { opacity: .3; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 1; } }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 16. Responsif ---------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  /* Selector disamakan spesifisitasnya dengan .stat-block.is-chart agar
     flex-basis-nya benar-benar tergantikan, bukan kalah spesifisitas. */
  .stat-block, .stat-block.is-chart, .stat-block.is-tend { flex: 1 1 50%; }
}

@media (max-width: 900px) {
  .shell { display: block; padding-top: 12px; }
  .content { display: grid; gap: 12px; }
  .clock span { display: none; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(290px, 84vw); max-height: none;
    border-width: 0 1px 0 0; transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  .market-list { max-height: none; flex: 1; }
  .scrim {
    display: block; position: fixed; inset: 0; z-index: 60; border: 0; padding: 0;
    background: rgba(0, 0, 0, .66); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  .hero { grid-template-columns: minmax(0, 1fr); }

  /* Di layar sempit teks memenuhi lebar, jadi gradasinya diputar vertikal:
     pekat di atas untuk teks, foto lebih tampak di bawah. */
  .hero-home, .hero-market, .hero-widget { background-position: center top; }
  .hero-home { background-image: var(--veil-mobile), url("hero-home-sm.webp"); }
  .hero-market { background-image: var(--veil-mobile), var(--hero-img-sm); }
  .hero-widget { background-image: var(--veil-mobile), url("hero-widget-sm.webp"); }

  /* Angka result jadi bilah penuh selebar kartu: elemen terpenting di layar
     sempit, bukan lagi kotak kecil yang terdorong ke bawah deretan chip. */
  .hero-market { grid-template-areas: "info" "value" "next"; }
  .hero-info { padding: 14px; }
  .hero-value { padding: 0; border-top: 1px solid var(--line); }
  .hero-next { padding: 8px 14px; }
  /* Kredit turun ke barisnya sendiri; berbagi baris dengan hitung mundur
     membuat keduanya saling menekan sampai pecah di tengah kata. */
  .hero-credit { margin-left: 0; width: 100%; }
  .hero-market .big-digits { justify-self: stretch; justify-content: center; padding: 14px 10px; }
  .hero-market .waiting { border: 0; }
  .big-digits b { width: 62px; height: 62px; font-size: 21px; }
  .waiting { min-width: 0; width: 100%; }

  /* Panel embed jadi satu kolom; kalau tidak, kolom teks tergencet jadi
     beberapa karakter per baris. */
  .embed { grid-template-columns: minmax(0, 1fr); }
  .embed-info { border-right: 0; border-bottom: 1px solid var(--line); }

  /* Bilah status bawah: akses daftar pasaran tanpa harus gulir ke atas. */
  body { padding-bottom: 48px; }
  .mobile-bar {
    position: fixed; inset: auto 0 0; z-index: 50;
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--bg-soft); border-top: 1px solid var(--line);
  }
  body.nav-open .mobile-bar { display: none; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 16px); }

  /* Bar header dipadatkan agar jam tetap muat di layar kecil. */
  .header-bar { gap: 8px; }
  .brand { gap: 7px; }
  .brand-mark { height: 24px; }
  .brand-text b { font-size: 13px; }
  .brand-text span { display: none; }
  .clock { height: 28px; padding: 0 9px; gap: 6px; }

  .hero { padding: 14px; }
  .hero-market { padding: 0; }
  .big-digits { gap: 8px; }
  .big-digits b { width: 56px; height: 56px; font-size: 19px; }
  .digits b { min-width: 26px; height: 30px; font-size: 15px; }

  /* Kolom nomor urut dibuang agar tanggal dan result tidak terdesak.
     Dibatasi ke tabel history supaya tabel kode widget tidak ikut terpotong. */
  .history thead th:first-child, .history tbody td:first-child { display: none; }

  .stat-block, .stat-block.is-chart, .stat-block.is-tend { flex: 1 1 100%; }
  .stat-block { border-right: 0; }
  .freq-col { padding: 8px 1px 6px; gap: 4px; }
  .freq-track { height: 40px; }
  .freq-col b, .freq-col em { font-size: 10px; }

  .code-box code { font-size: 10.5px; }
  .copy-btn { padding: 0 11px; }

  /* Tombol header cukup ikonnya saja supaya bar tetap muat. */
  .cta-btn { margin-right: 6px; padding: 0 9px; }
  .cta-btn b { display: none; }

  /* Baris kode dibuat bertumpuk: nama + result di atas, lalu kode dan tombol
     melebar penuh, supaya tabel tidak perlu digulir menyamping. */
  .code-table thead { display: none; }
  .code-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px;
    padding: 10px; border-bottom: 1px solid var(--line);
  }
  .code-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .code-table td:nth-child(2) { text-align: right; }
  .code-cell { grid-column: 1 / -1; max-width: none; }
  .copy-btn.is-inline { grid-column: 1 / -1; width: 100%; height: 32px; }
  .section-head, .panel-head, thead th, tbody td { padding-left: 10px; padding-right: 10px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-dir b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ticker-track { animation: none; }
}