/* DaengKoin storefront + admin — redesign 1a (dark default)
   Token & aturan: lihat CLAUDE.md + "Store redesign setup project/Design System.dc.html"
   Larangan: gradient emas, glow, shadow besar, teks < 11px, tap target < 44px. */

/* ——— Font self-host (public/fonts) ——— */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  /* ——— Permukaan ——— */
  --bg: #0B0B0C;            /* kertas / body */
  --header-bg: rgba(7,7,7,.88);   /* header sticky (blur) */
  --bg-elevated: #0E0E10;   /* bar, sidebar, bottom nav */
  --surface: #131315;       /* kartu */
  --surface-2: #101012;     /* field / inset / kartu nonaktif */
  --surface-3: #17171A;     /* inset lebih dalam */

  /* ——— Garis ——— */
  --border: #1F1F23;        /* border kartu */
  --border-field: #26262A;  /* border field & tombol */
  --divider: #1B1B1E;       /* divider dalam kartu */
  --border-soft: #17171A;   /* garis shell / header */

  /* ——— Teks ——— */
  --text: #F5F3EF;
  --text-2: #C9C6BF;        /* sekunder */
  --muted: #8B8A85;
  /* Digeser dari #78736A (2026-08-15): di kartu `#131315` kontrasnya cuma 3,94
     dan di kertas 4,18 — dua-duanya di bawah WCAG AA 4,5, di 37 tempat sekaligus.
     #827D73 mengangkatnya ke 4,53/4,81 tanpa mengubah rona abu hangatnya. */
  --muted-2: #827D73;       /* dim */

  /* ——— Emas ——— */
  --gold: #FEC832;          /* isi tombol utama + harga penting */
  --on-gold: #17140C;       /* teks di atas emas */
  --gold-text: #FEC832;     /* emas sebagai teks (light mode dioverride) */
  --gold-bg: #1A1710;       /* aksen emas lembut */
  --gold-chip: #241C0E;
  --gold-border: #3A2F14;
  --gold-soft: rgba(254, 200, 50, 0.22); /* ring fokus */
  --gold-dim: #E0AE1C;

  /* ——— Status ——— */
  --ok: #4ADE80;      --ok-bg: #0F2318;
  --danger: #F87171;  --danger-bg: #241414;  --danger-border: #3A2222;
  --info: #60A5FA;
  /* Latar "sedang diproses". Punya pasangan terang sendiri di desain
     (navy gelap di tema gelap, biru pucat di tema terang) dan tidak sama
     dengan --ok/--danger mana pun. */
  --proc-bg: #151A24;
  /* Baris tabel bergaris merah (Payment logs). Transparan supaya garis zebra
     tabelnya masih tembus. */
  --danger-row: rgba(36, 20, 20, .55);
  --stale-bg: #16110C;      /* kartu antrian > 60 menit */
  --stale-border: #4A2F16;

  /* ——— Bentuk ——— */
  --radius-frame: 18px;
  --radius: 15px;           /* kartu 14–16 */
  --radius-sm: 12px;        /* field & tombol 10–13 */
  --radius-pill: 999px;

  /* ——— Layout ——— */
  --max: 430px;
  --admin-max: none;
  --header-h: 56px;
  --sticky-h: 78px;

  /* ——— Shadow dimatikan (desain 1a: tanpa shadow besar & glow) ———
     Nilainya transparan, bukan `none`, supaya deklarasi box-shadow
     berisi daftar (mis. `0 0 0 1px …, var(--shadow)`) tetap valid. */
  --shadow: 0 0 0 0 transparent;
  --shadow-gold: 0 0 0 0 transparent;
  --gold-glow: transparent;

  /* ——— Tipografi ——— */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.45;
  font-family: var(--font);
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold-text); }

/* ——— Util tipografi (R1.4) ——— */
.screen-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.card-title { font-size: 16px; font-weight: 700; margin: 0; }
.group-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono, .num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.mono-b { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ——— Filter ikon (ikon repo pakai stroke="currentColor") ——— */
.ico-gold { filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%); }
.ico-grey { filter: invert(78%) sepia(6%) saturate(180%) brightness(103%); }
.ico-dim  { filter: invert(45%) sepia(6%) saturate(180%) brightness(95%); }


/* ——— Store shell ——— */
/* ⛔ SATU TAMPILAN untuk HP, tablet, dan komputer — halaman PELANGGAN (owner, 2026-09-25).
   Toko = kolom selebar `--max` di tengah layar, sisi kiri-kanan polos. Tampilan desktop
   lama (header nav, grid 4 kolom, kartu Ringkasan di halaman order, dua kolom Profil/Harga)
   DICABUT — 11 blok `@media (min-width)` dibuang utuh.

   Alasannya bukan selera: pembeli game-game ini memegang HP, dan tampilan kedua sudah
   pernah mematikan tombol bayar di dua layar desktop tanpa satu galat pun
   (`.sticky-bar` disembunyikan untuk semua layar demi kartu Ringkasan satu layar).

   ⛔ JANGAN menambah `@media (min-width: …)` untuk halaman pelanggan. Yang boleh cuma
   admin (`.admin-*`, `.tgtpl-*`, `.orders-*`) — admin tetap berdesain desktop. Kalau
   perlu sesuatu yang beda untuk TETIKUS, pakai `(hover: hover) and (pointer: fine)`,
   bukan lebar layar. Dijaga `SatuTampilanTest`.

   Bar bawah, menu tab, tombol chat, sheet, bilah PWA, dan popup sudah dikunci ke kolom
   ini lewat `--max` sejak desain HP-nya lahir — makanya pencabutan ini nol butuh aturan
   baru, cuma membuang. */
.shell {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border-soft);
  padding-bottom: calc(var(--sticky-h) + 16px);
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: var(--header-h);
  padding: 0 14px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--gold-text);
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  text-decoration: none !important;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--on-gold);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
.header-actions a {
  color: var(--muted);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none !important;
}
.header-actions a.active,
.header-actions a:hover {
  color: var(--gold-text);
  border-color: var(--gold-border);
  background: var(--gold-bg);
}
/* Tombol kembali store: kotak emas lembut (bukan tombol emas terisi — aturan
   "1 layar = maksimal 1 tombol emas terisi" tetap aman). */
.btn-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--gold-border);
  background: var(--gold-chip);
  color: var(--gold-text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none !important;
}
/* `a.btn-icon` (bukan `.btn-icon`) supaya menang atas `a:hover` global — kalau
   kalah, di light mode warnanya jadi #FEC832 yang kontrasnya kurang. */
a.btn-icon:hover { border-color: var(--gold); color: var(--gold-text); }

/* Panah kembali.
   Dulu isinya karakter teks "←" — `place-items:center` memusatkan KOTAK barisnya,
   tapi glifnya sendiri duduk di baseline huruf, jadi terlihat turun dari tengah.
   Ganti ke <img> menghilangkan seluruh urusan metrik font: gambar dipusatkan apa
   adanya. `display:block` wajib, kalau tidak img jadi inline dan menyeret ruang
   descender kembali.
   back.svg pakai `stroke="currentColor"` → sebagai <img> WAJIB difilter. */
.btn-icon-svg {
  display: block;
  filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%);
}
:root[data-theme="light"] .btn-icon-svg {
  filter: invert(58%) sepia(85%) saturate(520%) hue-rotate(357deg) brightness(92%);
}

.page { padding: 16px 14px 24px; position: relative; z-index: 1; }

.h1 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.h2 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.lead { color: var(--muted); margin: 0 0 18px; font-size: 0.9rem; }
.muted { color: var(--muted); font-size: 0.875rem; }
.muted-2 { color: var(--muted-2); font-size: 0.8rem; }

.flash {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 0.88rem;
  font-weight: 500;
}
/* Pakai token, bukan warna gelap hardcoded: sebelumnya flash di tema terang
   jadi teks merah muda di atas latar merah tua (nyaris tak terbaca). */
.flash-ok { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok); }
.flash-err { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.flash-list { margin: 0; padding-left: 18px; }

/* Hero home */
.hero {
  margin: 0 0 18px;
  padding: 18px 16px;
  border-radius: var(--radius);
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  position: relative;
  overflow: hidden;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-gold);
  background: var(--gold);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}
.hero .h1 { margin-bottom: 4px; }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.trust-pill {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-field);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}

/* Game tiles */
.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.section-label .h2 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.game-grid { display: grid; gap: 12px; }
.game-tile {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--text);
  text-decoration: none !important;
  transition: border-color .15s;
}
.game-tile:hover { border-color: var(--border-field); }
.game-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--gold-text);
}
.game-tile strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.game-tile .meta { color: var(--muted); font-size: 0.78rem; }
/* R1.6: grid game punya banyak tile — CTA-nya tombol garis, bukan emas terisi,
   supaya aturan "1 layar = maks 1 tombol emas" tidak dilanggar. */
.game-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-text);
  background: transparent;
  border: 1px solid var(--border-field);
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}
.card-soft {
  background: var(--surface-2);
}

/* Order steps (Garuda-style headers) */
.game-banner {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.game-banner .game-icon { width: 48px; height: 48px; font-size: 0.95rem; }

.step {
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--divider);
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}
.step-body { padding: 14px; }

label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
input[type=text],
input[type=password],
input[type=number],
input[type=search],
input[type=date],
input[type=email],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-field);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
textarea { min-height: 90px; resize: vertical; }
.row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.note {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border-left: 3px solid var(--gold-border);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.tab {
  border: 1px solid var(--border-field);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all .15s;
}
.tab:hover { color: var(--text); border-color: var(--muted-2); }
.tab.active {
  background: var(--gold-chip);
  color: var(--gold-text);
  border-color: var(--gold-border);
  font-weight: 700;
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.product-card {
  border: 1.5px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  width: 100%;
  font-family: var(--font);
  transition: border-color .15s, box-shadow .15s, transform .12s;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.product-card:hover { border-color: var(--gold-border); }
.product-card.selected {
  border-color: var(--gold);
  background: var(--gold-bg);
}
.product-card-icon{
  width:36px;height:36px;border-radius:10px;object-fit:cover;
  border:1px solid var(--border-soft);background:var(--bg-elevated);flex-shrink:0;
}
.product-card-text{min-width:0;flex:1}
.product-card .pname { font-weight: 600; font-size: 0.88rem; line-height: 1.25; }
.product-card .price {
  color: var(--gold-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  margin-top: 0;
}
.product-card .muted-2 {
  font-size: 0.72rem;
  color: var(--muted-2);
  margin-top: 2px;
}
.product-grid:empty::after,
.product-grid .empty-tab {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 12px 4px;
}

.accordion details {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  background: var(--surface);
  padding: 4px 10px 4px;
  overflow: hidden;
}
.accordion summary {
  cursor: pointer;
  font-weight: 650;
  padding: 10px 4px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: '▾';
  color: var(--gold-text);
  font-size: 0.85rem;
}
.accordion details[open] summary::after { content: '▴'; }
.method-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 6px;
  border-top: 1px solid var(--divider);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 0;
}
.method-opt:hover { background: var(--surface-2); }
.method-opt.selected {
  background: var(--gold-bg);
  box-shadow: inset 0 0 0 1px var(--gold-border);
}
.method-opt input { width: auto; accent-color: var(--gold); flex-shrink: 0; }
.method-name { flex: 1; min-width: 0; }
.method-fee { font-size: 0.72rem; white-space: nowrap; }
.field-gap { margin-top: 12px; }
.req { color: var(--gold-text); }

/* Sticky checkout */
.sticky-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--max);
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 50;
}
.sticky-bar .sticky-meta { min-width: 0; flex: 1; }
.sticky-bar .total-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.sticky-bar .total {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.sticky-bar .total-hint {
  font-size: 0.7rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.sticky-bar .btn-primary {
  flex-shrink: 0;
  min-height: 48px;
  padding: 12px 20px;
  font-size: 0.95rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.92rem;
  /* Batas tap 44px hidup DI SINI, bukan ditempel per komponen (2026-08-15).
     Padding 12+12 plus satu baris teks 0,92rem = 42px — dua piksel di bawah batas,
     dan selisih 2px tidak terlihat mata. Itulah kenapa dia lolos berkali-kali dan
     baru ketahuan waktu diukur `getBoundingClientRect()` di produksi 2026-08-09,
     di tombol "Bayar sekarang" — tombol yang memindahkan uang.
     Sebelum ini ada 47 `min-height:44px` bertebaran menambal satu per satu, jadi
     tombol yang lahir belakangan selalu 42px lagi tanpa peringatan.
     Baris tabel admin desktop yang SENGAJA lebih pendek (32/36/40px) tetap menang
     karena selektornya lebih spesifik — jangan "rapikan" dengan menyamakan mereka. */
  min-height: 44px;
  transition: transform .12s, opacity .12s, box-shadow .12s;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  min-width: 120px;
}
.btn-primary:hover { background: var(--gold-dim); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-field);
}
.btn-ghost:hover { border-color: var(--gold-border); color: var(--gold-text); }
/* Tombol Simpan di /admin/settings: garis EMAS, bukan emas terisi.
   Halaman itu sengaja nol tombol emas — delapan kartu mandiri, tidak ada satu
   pun yang "aksi utama halaman" (CLAUDE.md, dijaga HardeningTest). Tapi tombol
   abu di antara deretan field abu jadi tidak terbaca sebagai aksi sama sekali;
   dilaporkan user 2026-08-01 waktu menyimpan password. Garis emas memisahkannya
   dari field tanpa mengklaim jadi aksi utama halaman. */
.settings-panel .orders-manual-actions .btn-ghost,
.settings-panel .wr-card .btn-ghost {
  border-color: var(--gold-border);
  color: var(--gold-text);
}
.settings-panel .orders-manual-actions .btn-ghost:hover,
.settings-panel .wr-card .btn-ghost:hover { background: var(--gold-bg); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.btn-danger:hover { border-color: var(--danger); }
.btn-danger.btn-sm { padding: 8px 12px; }
.btn-sm { padding: 8px 12px; font-size: 0.82rem; }
.btn-block { width: 100%; }

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.chip-pending { background: var(--surface-3); color: var(--text-2); }
.chip-processing { background: var(--gold-chip); color: var(--gold-text); }
.chip-success { background: var(--ok-bg); color: var(--ok); }
.chip-canceled { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-border); }

.status-hero {
  text-align: center;
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.status-hero .oid {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.kv { display: grid; gap: 8px; }
.kv-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 0.9rem;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row span:first-child { color: var(--muted); }
.kv-row strong { text-align: right; font-weight: 600; }

.checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}
.checkbox input { width: auto; accent-color: var(--gold); }

/* Bottom nav optional */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--max);
  display: grid;
  /* 4 tab sejak Lacak + Riwayat digabung jadi "Pesanan" (2026-08-04).
     Dihitung dari jumlah anak, bukan angka mati: menambah/mengurangi tab tidak
     boleh menyisakan kolom kosong yang cuma kelihatan di HP. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  z-index: 45;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav a {
  text-align: center;
  padding: 10px 2px 12px;
  min-height: 56px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
}
.bottom-nav a.active, .bottom-nav a:hover { color: var(--gold-text); }
.bottom-nav .nav-ico { display: block; font-size: 1.15rem; margin-bottom: 2px; }
.bottom-nav .nav-ico-svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 3px;
  /* SVG stroke is currentColor; img can't inherit — use CSS filter for gold active */
  opacity: 0.75;
  filter: invert(45%) sepia(6%) saturate(180%) brightness(95%);
}
.bottom-nav a.active .nav-ico-svg,
.bottom-nav a:hover .nav-ico-svg {
  opacity: 1;
  filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%);
}
.tab { min-height: 44px; }
.method-icon { background: transparent !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tab:focus-visible,
.product-card:focus-visible,
.method-opt:focus-within {
  /* ⚠️ `--gold-text`, BUKAN `--gold` (digeser 2026-08-17).
     Emas terisi `#FEC832` di atas kertas terang `#E9E5DC` cuma **1,24** — WCAG 2.2
     (1.4.11 Non-text Contrast) minta **3,0** untuk indikator fokus. Jadi selama ini
     pengguna keyboard di tema terang menekan Tab dan praktis tidak melihat di mana
     dia berada, di SETIAP tautan dan tombol di situs.
     `--gold-text` ikut tema: 4,53 di terang, 12,67 di gelap.
     Ini jebakan yang sama dengan "emas isi tidak boleh jadi warna teks di tema
     terang" (dijaga `ThemeTokenTest`), cuma pindah dari `color` ke `outline` — dan
     karena pindah properti, penjaganya tidak melihatnya. */
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

.game-tile-body { min-width: 0; }
.game-tile-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* —— R3.6 Riwayat —— */
.history-search-form { margin-bottom: 8px; }
.history-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  padding: 0 14px;
}
.history-search-bar:focus-within {
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px rgba(254, 200, 50, .12);
}
.history-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  padding: 0;
  height: 100%;
}
.history-search-input::placeholder { color: #5C5B57; }
.history-search-submit {
  border: 0;
  background: transparent;
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  /* ⚠️ `padding: 0` bikin tingginya cuma setinggi hurufnya — terukur **16px**
     (audit 2026-08-17). Ini tombol submit, bukan tautan di dalam kalimat: batas
     tap 44px berlaku penuh. Padding mendatar dipertahankan kecil supaya dia tetap
     duduk rapi di dalam bilah cari. */
  min-height: 44px;
  padding: 0 4px;
  flex-shrink: 0;
}
.history-search-submit:hover { color: var(--gold-text); }
.history-search-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.history-form-note {
  margin: 18px 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.history-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0 12px;
}
.history-pill {
  border: 1px solid var(--border-field);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 14px;
  cursor: pointer;
}
.history-pill.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
  font-weight: 700;
}
.history-pill-n { font-variant-numeric: tabular-nums; }

/* Rail di atas kartu — di SEMUA lebar sejak 2026-09-25 (satu tampilan, lihat `.shell`). */
.history-desk { display: block; }
.history-rail { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.history-rail-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 14px 15px;
}
.history-rail-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.history-rail-sub { margin: 6px 0 12px; font-size: 13px; line-height: 1.45; }
.history-rail .history-filters { margin: 0; }
.history-rail .history-search-form { margin-bottom: 0; }
.history-rail-help .btn { margin-top: 4px; }
.history-table-head { display: none; }
.history-col-time,
.history-col-oid,
.history-col-total { display: none; }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "product status"
    "oid total";
  gap: 10px 12px;
  align-items: center;
  text-decoration: none !important;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  padding: 14px 15px;
  transition: border-color .15s;
}
.history-card[hidden] { display: none !important; }
.history-card:hover { border-color: var(--border-field); }
.history-col-product {
  grid-area: product;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.history-col-status { grid-area: status; justify-self: end; }
.history-col-oid {
  grid-area: oid;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-col-total {
  grid-area: total;
  justify-self: end;
  font-size: 14.5px;
  font-weight: 700;
}
.history-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-field);
}
.history-card-icon-empty {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border-field);
}
.history-card-text { flex: 1; min-width: 0; }
.history-card-name {
  font-size: 14.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-card-sub {
  font-size: 12.5px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-card .chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
}
/* Mobile: show oid/total as foot row */
.history-card .history-col-oid,
.history-card .history-col-total { display: block; }
.history-card .history-col-oid {
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.history-card .history-col-total {
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.history-cap {
  margin: 14px 0 8px;
  font-size: 12px;
  text-align: center;
}

.history-empty {
  text-align: center;
  margin-top: 28px;
  padding: 8px 4px 16px;
}
.history-empty-title {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.history-empty-body {
  margin: 8px 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.history-empty .btn { max-width: 280px; margin-left: auto; margin-right: auto; }

.status-success-ico {
  display: block;
  margin: 0 auto 10px;
}
.oid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oid-row .oid { flex: 1; min-width: 0; }
.btn-ico {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 4px;
  filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%);
}
.copy-toast {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ok);
}
.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  flex: 0 0 auto;
}
.progress-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.progress-step.done .progress-dot,
.progress-step.current .progress-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
.progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.progress-step.current .progress-label,
.progress-step.done .progress-label { color: var(--text); }
.progress-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 12px;
}
.progress-line.done { background: var(--gold); }

.shell.has-bottom-nav { padding-bottom: 72px; }
.shell.has-sticky { padding-bottom: calc(var(--sticky-h) + 12px); }

.admin-body { margin: 0; }
.shell-admin {
  width: 100%;
  max-width: none;
  display: flex;
  min-height: 100vh;
  padding-bottom: 0;
  background: var(--bg);
  box-shadow: none;
  position: relative;
}
.admin-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 55;
}
.admin-menu-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-field);
  border-radius: 10px;
  background: var(--surface);
  color: var(--gold-text);
  font-size: 1.2rem;
  cursor: pointer;
}
.admin-top-brand { flex: 1; min-width: 0; }
.admin-top-store {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
}
.admin-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 60;
}
.admin-side {
  width: 248px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  padding: 14px 10px 20px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 70;
}
.admin-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 6px;
}
.admin-side .brand {
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-text);
  text-decoration: none !important;
}
/* Silangnya digambar, sama seperti `.st-ico-bad` dan `.header-saldo-plus`.
   Terukur 0,5px meleset — masih di bawah ambang, tapi dibuat seragam supaya
   aturannya nol pengecualian: tidak ada glyph yang dipakai sebagai ikon di repo
   ini. Daftar pengecualian yang "cuma satu" adalah cara aturan berhenti dipakai. */
.admin-side-close {
  display: none;
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-field);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0;
  cursor: pointer;
}
.admin-side-close::before,
.admin-side-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.admin-side-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.admin-side-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nav-section { margin-bottom: 12px; }
.nav-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 8px 12px 4px;
}
.admin-side a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
  margin-bottom: 2px;
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none !important;
  min-height: 44px;
}
/* Badge jumlah antrian di item sidebar */
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--gold-chip);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.admin-side a.active .nav-badge { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }

.admin-side a:hover { background: var(--surface-2); color: var(--text); }
/* Desain: item aktif = latar emas lembut (--gold-bg) + teks emas */
.admin-side a.active {
  background: var(--gold-bg);
  color: var(--gold-text);
}
.admin-nav-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
  filter: invert(45%) sepia(6%) saturate(180%) brightness(95%);
}
.admin-side a:hover .admin-nav-ico {
  opacity: 1;
  filter: invert(78%) sepia(6%) saturate(180%) brightness(103%);
}
.admin-side a.active .admin-nav-ico {
  opacity: 1;
  filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%);
}
.admin-logout-form { margin-top: 8px; padding: 0 4px; }
.admin-logout-btn { width: 100%; }
.admin-main {
  flex: 1 1 0%;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 24px 28px;
  box-sizing: border-box;
}
.admin-empty-cell {
  text-align: center;
  padding: 28px 12px !important;
}
.admin-empty-cell .empty-illu { margin-bottom: 8px; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.kpi .n {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-text);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data th,
table.data td {
  border-bottom: 1px solid var(--divider);
  padding: 11px 8px;
  text-align: left;
}
table.data th {
  color: var(--muted);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
table.data tr:hover td { background: var(--surface-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters > * { flex: 1 1 140px; }
.form-grid { display: grid; gap: 12px; max-width: 520px; }

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 22px;
}

@media (max-width: 768px) {
  .shell-admin { flex-direction: column; }
  .admin-topbar { display: flex; }
  .admin-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(280px, 88vw);
    height: 100vh;
    transform: translateX(-105%);
    transition: transform .2s ease;
    border-right: 1px solid var(--border-soft);
  }
  .shell-admin.nav-open .admin-side { transform: translateX(0); }
  .admin-side-close { display: grid; place-items: center; }
  .admin-main { padding: 16px 14px 28px; max-width: none; }
}

/* Pagination simple */
nav[role=navigation] span,
nav[role=navigation] a {
  display: inline-block;
  padding: 6px 10px;
  margin: 2px;
  border-radius: 8px;
  border: 1px solid var(--border-field);
  color: var(--muted);
  font-size: 0.82rem;
}
nav[role=navigation] a:hover { color: var(--gold-text); border-color: var(--gold-border); }

.brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--surface-2);
}
.game-icon-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--border-field);
  background: var(--surface-2);
  flex-shrink: 0;
}
.method-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: var(--surface-2);
}
.site-footer{display:flex;justify-content:center;gap:16px;padding:20px 12px 28px;font-size:.8rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--gold-text)}
/* Tombol CS melayang, di luar .shell — jangan pakai .shell.has-bottom-nav
   .cs-fab-wrap (tidak pernah match). Default = layar bottom-nav;
   .cs-fab-sticky = layar sticky bar Order. Yang di-fixed wadahnya, supaya
   menu pilihan kanal bisa diposisikan absolut relatif ke tombolnya. */
.cs-fab-wrap{
  position:fixed;
  right:max(12px,calc(50% - 215px + 12px));
  bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
  z-index:60;
}
.cs-fab-wrap.cs-fab-sticky{
  bottom:calc(var(--sticky-h, 78px) + env(safe-area-inset-bottom, 0px) + 12px);
}
/* Bukan tombol emas terisi: layar Order & Isi Saldo sudah punya satu, dan
   aturan emas cuma memberi jatah satu per layar. */
.cs-fab{
  width:52px;height:52px;border-radius:50%;
  border:1px solid var(--gold-border);
  background:var(--surface);
  display:grid;place-items:center;cursor:pointer;
  text-decoration:none!important;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  padding:0;
}
.cs-fab:hover{background:var(--gold-bg)}
/* support.svg pakai stroke=currentColor → sebagai <img> wajib difilter. */
.cs-ico{display:block;filter:invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%)}
:root[data-theme="light"] .cs-ico{filter:invert(58%) sepia(85%) saturate(520%) hue-rotate(357deg) brightness(92%)}

.cs-menu{
  position:absolute;right:0;bottom:calc(100% + 10px);
  width:252px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.cs-menu[hidden]{display:none}
.cs-menu-head{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:6px 10px 8px;
}
.cs-opt{
  display:flex;align-items:center;gap:11px;
  padding:10px;border-radius:11px;min-height:44px;
  text-decoration:none!important;
}
.cs-opt:hover,.cs-opt:focus-visible{background:var(--surface-2)}
.cs-opt img{display:block;flex-shrink:0}
.cs-opt-body{display:flex;flex-direction:column;min-width:0}
.cs-opt-name{font-size:14.5px;font-weight:700;color:var(--text)}
.cs-opt-sub{font-size:12px;color:var(--muted);margin-top:1px}
.muted-2{color:var(--muted-2);font-size:.78rem}
.empty-illu{display:block;margin:0 auto;opacity:.92}
.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}

.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dash-updated{opacity:.85}
.dash-period{margin-bottom:14px}
.dash-period-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.dash-pill{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.8rem;font-weight:700;font-family:var(--font);cursor:pointer;text-decoration:none!important}
.dash-pill:hover{color:var(--gold-text);border-color:var(--gold-border)}
.dash-pill.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.dash-custom-row{display:none;flex-wrap:wrap;gap:8px;align-items:center}
.dash-custom-row.is-open{display:flex}
.dash-custom-row input[type=date]{max-width:160px}
.dash-section-hint{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 11px}
.dash-head .orders-title,.queue-head .orders-title{margin:0}

.dash-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:16px}
.dash-action{
  display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--border);background:var(--surface);color:inherit;
  text-decoration:none!important;transition:border-color .15s;
}
.dash-action:hover{border-color:var(--gold-border)}
.dash-action-tile{
  width:42px;height:42px;border-radius:12px;background:var(--surface-3);
  display:grid;place-items:center;flex-shrink:0;
}
.dash-action-ico{width:20px;height:20px;filter:invert(78%) sepia(6%) saturate(180%) brightness(103%)}
.dash-action-text{flex:1;min-width:0}
.dash-action-label{display:block;font-size:13.5px;font-weight:600;color:var(--muted)}
.dash-action-n{display:block;font-family:var(--font-mono);font-size:25px;font-weight:700;color:var(--text);margin-top:2px;line-height:1.1}
.dash-action-go{
  flex-shrink:0;border:1px solid var(--border-field);border-radius:10px;
  padding:10px 14px;font-size:13px;font-weight:700;color:var(--text-2);
}
.dash-action-hot{border-color:var(--gold-border);background:var(--gold-bg)}
.dash-action-hot .dash-action-tile{background:var(--gold-chip)}
.dash-action-hot .dash-action-ico{filter:invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%)}
.dash-action-hot .dash-action-label{color:var(--text-2)}
.dash-action-hot .dash-action-n{color:var(--gold-text)}
.dash-action-hot .dash-action-go{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:800}
.dash-action-danger{border-color:var(--danger-border);background:var(--danger-bg)}
.dash-action-danger .dash-action-tile{background:var(--danger-bg)}
.dash-action-danger .dash-action-ico{filter:invert(58%) sepia(35%) saturate(1200%) hue-rotate(315deg) brightness(95%)}
.dash-action-danger .dash-action-n{color:var(--danger)}
.dash-action-danger .dash-action-go{border-color:var(--danger-border);color:var(--danger)}

/* Ikon di kiri-atas mengikuti alur baca label → angka (desain), bukan absolute
   di kanan-atas seperti sebelumnya. */
.kpi-link{display:block;color:inherit;text-decoration:none!important;transition:border-color .15s,transform .12s}
.kpi-link:hover{border-color:var(--gold);transform:translateY(-1px)}
.kpi-ico{display:block;width:18px;height:18px;filter:invert(45%) sepia(6%) saturate(180%) brightness(95%)}
.kpi-ico-ok{filter:invert(58%) sepia(60%) saturate(500%) hue-rotate(85deg) brightness(95%)}
.kpi .muted{margin-top:9px;font-size:12.5px;font-weight:600}
.kpi .n{margin-top:3px;font-size:22px}
/* Base .kpi .n emas — di desain cuma Omzet yang emas dan Selesai hijau. Di-scope
   ke .dash-kpi saja supaya KPI di Settings tidak ikut berubah. */
.dash-kpi .kpi .n{color:var(--text)}
.dash-kpi .kpi .kpi-n-ok{color:var(--ok)}
.kpi-gmv{border-color:var(--gold-border);background:var(--gold-bg)}
.kpi-gmv .kpi-ico{opacity:1;filter:invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%)}
/* --gold-text, bukan --gold: di light mode emas murni di atas kartu emas muda
   nyaris tidak terbaca (CLAUDE.md: aksen emas light = #816208). */
.kpi-gmv-n,.kpi-gmv .n{color:var(--gold-text)!important;font-size:1.15rem}
.dash-rank{color:var(--gold-text);font-weight:800;margin-right:4px}

.queue-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.queue-count-pill{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--gold-chip);border:1px solid var(--gold-border);color:var(--gold-text);font-size:11.5px;font-weight:700}
.queue-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;margin-bottom:12px;border-radius:13px;border:1px solid var(--gold-border);background:var(--gold-bg);position:sticky;top:0;z-index:5}
.queue-bulk-bar[hidden]{display:none!important}
.queue-bulk-count{display:flex;align-items:center;gap:12px;font-size:14px}
.queue-bulk-tick{width:17px;height:17px;border-radius:4px;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-size:11px;font-weight:800}
.queue-bulk-count strong{font-family:var(--font-mono)}
.queue-bulk-actions{display:flex;gap:10px}
.queue-filters{margin-bottom:12px}

.queue-list{display:flex;flex-direction:column;gap:12px}
.queue-card{
  display:grid;grid-template-columns:24px 1.1fr 1.2fr 1fr .8fr auto;gap:18px;align-items:center;
  border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:18px 20px;
}
.queue-card.is-stale{border-color:var(--stale-border);background:var(--stale-bg)}
.queue-card-check{display:flex;align-items:center}
.queue-card-check input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.queue-card-oid{display:block;font-family:var(--font-mono);font-size:14.5px;font-weight:700;color:var(--gold-text);text-decoration:none}
.queue-card-oid:hover{text-decoration:underline}
.queue-card-order .queue-wait{margin-top:6px}
.queue-card-game-name{font-size:14px;font-weight:600;color:var(--text)}
.queue-card-game-sub{font-size:12.5px;margin-top:3px}
.queue-field-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.queue-card-actions{display:flex;gap:9px;justify-content:flex-end}
.queue-stale-note{margin:14px 0 0;font-size:12.5px}

/* ——— Tanda pengiriman supplier (DF4) ———
   Gagal pakai token danger, Timeout pakai token stale (kuning). Dua-duanya sudah
   punya nilai light mode, jadi tidak ada warna hardcoded di sini. */
.queue-card.is-supplier-failed{border-color:var(--danger-border);background:var(--danger-bg)}
.queue-card.is-supplier-stalled{border-color:var(--stale-border);background:var(--stale-bg)}
/* Banner harus melintang penuh: .queue-card itu grid, kalau tidak dipaksa
   dia jadi kolom pertama dan mendorong checkbox + isi kartu ke samping. */
.queue-supplier{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
  padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;
}
.queue-supplier strong{font-weight:800}
.queue-supplier-failed{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}
.queue-supplier-stalled{background:var(--stale-bg);border:1px solid var(--stale-border);color:var(--gold-text)}
.queue-supplier-msg{flex:1 1 100%;font-size:11.5px;color:var(--text-2)}
.queue-issue-btn{border-color:var(--danger-border)!important;color:var(--danger)!important}
.queue-issue-note{
  margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:12.5px;
  background:var(--surface-3);border:1px solid var(--border);color:var(--text-2);
}
.queue-issue-note a{color:var(--gold-text);font-weight:600}

/* Kartu "Pengiriman supplier" di detail order. */
.odet-supplier-alert{
  margin:0 0 14px;padding:11px 13px;border-radius:11px;font-size:12.5px;line-height:1.5;
}
.odet-supplier-alert strong{display:block;margin-bottom:3px;font-weight:800}
.odet-supplier-alert.is-failed{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}
.odet-supplier-alert.is-stalled{background:var(--stale-bg);border:1px solid var(--stale-border);color:var(--gold-text)}
.odet-kv-wide{grid-column:1/-1}

/* ——— SKU supplier (DF5) ——— */
.supplier-cmd{
  margin:10px 0;padding:9px 13px;border-radius:10px;display:inline-block;
  background:var(--surface-3);border:1px solid var(--border-field);
  color:var(--text);font-size:13px;
}
.supplier-filter-check{white-space:nowrap;font-size:12.5px}
/* `.mono` (0,1,0) kalah dari `input[type="text"]` (0,1,1) yang menyetel --font.
   SKU itu kode, dan CLAUDE.md minta kode pakai JetBrains Mono. */
input[type="text"].mono{font-family:var(--font-mono);letter-spacing:.02em}
.supplier-sku{white-space:nowrap}
/* Selector dinaikkan, bukan !important: `table.data th, table.data td` menyetel
   text-align:left dengan spesifisitas 0,1,1 dan mengalahkan kelas tunggal. */
table.data th.supplier-th-cost,
table.data td.supplier-th-cost{text-align:right;white-space:nowrap}
.supplier-mapped{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:12.5px}
.supplier-mapped+.supplier-mapped{margin-top:5px}
/* Margin: hijau kalau untung, merah kalau tiap penjualan merugi. */
.supplier-margin{color:var(--ok);font-weight:700;font-size:12px}
.supplier-margin.is-loss{color:var(--danger)}
.supplier-inactive{font-size:11px}
.products-supplier-note{
  padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;
  background:var(--surface-3);border:1px solid var(--border-field);color:var(--text-2);
}
.products-supplier-note.is-loss{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}

.queue-check-col{width:36px}
.queue-target{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.queue-target-id{font-family:var(--font-mono);letter-spacing:.03em;font-size:15px;font-weight:700;color:var(--text)}
.queue-copy-btn{padding:5px 9px!important;font-size:11.5px!important}
.queue-wait{display:inline-block;padding:4px 8px;border-radius:5px;font-size:11px;font-weight:700;background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.queue-wait-stale{background:var(--danger-bg);color:var(--danger)}
.queue-tg-link{color:var(--gold-text);font-weight:600;text-decoration:none}
.queue-tg-link:hover{text-decoration:underline}

@media (max-width:1100px){
  .queue-card{grid-template-columns:24px 1fr 1fr;row-gap:14px}
  .queue-card-actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:768px){
  .queue-card{grid-template-columns:24px 1fr;padding:16px}
  .queue-card-game,.queue-card-field{grid-column:2 / -1}
  /* Tap target minimum 44px (aturan CLAUDE.md) */
  .queue-card-actions .btn{flex:1;min-height:44px;justify-content:center}
  .queue-bulk-bar{top:52px}
  .queue-bulk-bar .btn{min-height:40px}
}

.orders-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.orders-title{margin:0}
.orders-sub{margin:8px 0 0}
.orders-count{color:var(--text);font-weight:700}
.orders-head-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0;align-items:center}
.orders-head-actions .btn{min-height:40px}
.orders-filter-chip{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--gold-chip);border:1px solid var(--gold-border);color:var(--gold-text)}
.orders-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.orders-filters{margin-bottom:20px;gap:10px}
.orders-control{min-height:44px;box-sizing:border-box}
.orders-filters select.orders-control,
.orders-filters input.orders-control{padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit}
.orders-filter-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.orders-filter-actions .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px}
.orders-btn-accent{border-color:var(--gold-border)!important;color:var(--gold-text)!important}
.orders-btn-accent:hover{background:var(--gold-bg)!important;border-color:var(--gold-border)!important;color:var(--gold-text)!important}
.orders-row-actions{display:flex;flex-wrap:wrap;gap:8px;min-width:120px;justify-content:flex-end}
.orders-row-actions .btn{min-height:36px;white-space:nowrap}
.orders-th-actions{text-align:right}
.orders-table-wrap{overflow-x:auto}
.orders-table td{border-bottom:1px solid var(--border-soft);vertical-align:middle}
.orders-table tr:last-child td{border-bottom:0}
.orders-cell-sub{font-size:.8rem;margin-top:2px}
.orders-cell-total{font-weight:700;white-space:nowrap}
.orders-cell-time{white-space:nowrap;font-size:.85rem}
.orders-target-sm{font-size:.9rem}
.orders-pager{margin-top:16px}

/* ——— Paginasi design system (view pagination/daengkoin) ———
   Halaman aktif pakai pola nav aktif (--gold-bg + teks emas) — masuk daftar
   pemakaian emas yang diizinkan CLAUDE.md, bukan tombol emas terisi. */
.dk-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dk-pager-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border-radius:10px;
  border:1px solid var(--border-field);background:var(--surface);
  color:var(--text-2);font-size:13px;font-weight:600;text-decoration:none;
  transition:border-color .15s,color .15s;
}
.dk-pager-btn:hover{border-color:var(--gold);color:var(--text)}
.dk-pager-btn.is-current{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold-text);cursor:default}
.dk-pager-btn.is-disabled{opacity:.35;cursor:default;pointer-events:none}
.dk-pager-dots{color:var(--muted-2);padding:0 2px}
.dk-pager-info{margin-left:8px;font-size:12.5px;white-space:nowrap}

/* ——— Form login / daftar / lupa password ——— */
.auth-form{display:flex;flex-direction:column;margin-bottom:12px}
.auth-hint{margin:5px 0 0;font-size:11.5px;line-height:1.5}
.auth-form-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-top:12px;
}
.auth-remember{font-size:12.5px;min-height:44px;display:flex;align-items:center;gap:8px}
.auth-forgot{font-size:12.5px;font-weight:600;color:var(--gold-text);min-height:44px;display:flex;align-items:center}
/* Satu-satunya tombol emas terisi di layar Masuk (aturan CLAUDE.md). */
.auth-submit{
  width:100%;min-height:48px;margin-top:6px;border:0;border-radius:12px;cursor:pointer;
  background:var(--gold);color:var(--on-gold);
  font-family:var(--font);font-size:15px;font-weight:800;
}
.auth-register-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:48px;border-radius:12px;text-decoration:none;
  border:1px solid var(--border-field);background:var(--surface);color:var(--text);
  font-size:14.5px;font-weight:700;
}
.auth-register-btn:hover{border-color:var(--gold)}
.auth-remember-note{margin:8px 0 14px;font-size:11.5px;line-height:1.5;text-align:center}
.auth-sosial-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;text-align:center}
.auth-center{text-align:center}

/* ——— Kartu password opsional di Profil ——— */
.profile-password{padding:0;margin-top:12px}
.profile-password-head{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:14px 16px;cursor:pointer;font-size:14px;font-weight:700;list-style:none;
  min-height:44px;
}
.profile-password-head::-webkit-details-marker{display:none}
.profile-password-form{padding:0 16px 16px;display:flex;flex-direction:column;gap:7px}
.profile-password-hint{margin:0 0 4px;font-size:12.5px;line-height:1.5}
.profile-password-save{margin-top:10px}

/* ——— Tab Settings (client-side, pola pills halaman order) ——— */
.settings-tabs{margin-bottom:14px}
/* Kartu setelan MENGALIR jadi beberapa kolom di layar lebar (2026-08-19, laporan user:
   "banyak kosong di kanannya").

   Sebelumnya panelnya `display:block` dan `.wr-card` dipatok `max-width:520px`, jadi di
   layar 1900px kartunya menumpuk satu kolom dan menyisakan **1.132px dari 1.652px kosong**
   — 69% lebar terbuang, dan tab Hub jadi 1.045px tinggi padahal isinya cuma tiga kartu.

   Lebar kartunya TIDAK diubah: trek grid-nya dipatok maksimum 520px, sama dengan pagu
   lamanya. Yang berubah cuma penempatannya, jadi nol isi kartu yang perlu ditata ulang.
   Terukur: Hub 1.045 -> 466px, Login 1.232 -> 613px, Digiflazz 946 -> 661px.

   ⚠️ `minmax(min(100%, 420px), 520px)`, bukan `1fr` telanjang. `1fr` = `minmax(auto, 1fr)`
   dan `auto` di situ min-content — kolomnya menolak menyempit di bawah isi terlebarnya
   (jebakan yang sudah memakan `.nom-grid`, lihat CLAUDE.md). `min(100%, …)` juga yang
   membuat kolomnya muat di 375px: tanpa itu, minimum 420px melebihi layarnya.

   ⚠️ Yang MEMBENTANG penuh bawaannya, dan `.wr-card` yang dikecualikan — bukan sebaliknya.
   Mengubah induk jadi grid membuat SEMUA anaknya jadi item grid, termasuk yang bukan kartu:
   `.kpi-grid` di tab Sistem dan Duitku terjepit ke satu kolom dan panelnya justru
   BERTAMBAH tinggi. Mendaftar pengecualian akan meleset lagi di anak berikutnya yang
   ditambahkan orang.

   ⚠️ `margin-bottom: 0` wajib: `.card` bawa margin 14px dan `.kpi-grid` 22px, dan itu
   MENUMPUK di atas `gap` — jarak antar kartu jadi 26px, dan panel berkartu tunggal ikut
   tumbuh 12px tanpa alasan. Jarak datang dari `gap` saja (aturan CLAUDE.md). */
.settings-panel{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 520px));
  gap:12px;
  align-items:start;
}
.settings-panel > *{grid-column:1 / -1; min-width:0; margin-bottom:0}
.settings-panel > .wr-card{grid-column:auto}
.settings-panel[hidden]{display:none!important}

/* Baris bot secret: field + tombol buat/salin. Di layar sempit tombolnya turun
   sendiri, bukan menyempitkan field sampai secretnya tidak terbaca. */
.tg-secret-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tg-secret-row .orders-control{flex:1;min-width:200px}
.tg-secret-row .btn{flex-shrink:0}

/* ——— Kartu status Digiflazz di Settings (baca saja) ——— */
.df-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:6px 0 4px}
.df-status-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px;min-width:0}
.df-status-row .mono{text-align:right;word-break:break-word}
.df-ok{color:var(--ok)}
.df-bad{color:var(--danger);font-weight:700}
.df-note-bad{color:var(--danger)}
@media (max-width:700px){ .df-status-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .dk-pager-btn{min-width:44px;height:44px}   /* tap target mobile */
  .dk-pager-info{flex-basis:100%;margin:6px 0 0}
}
.orders-pager-mobile{display:none;width:100%}
.orders-desktop .admin-empty-cell .btn{margin-top:12px}
.orders-show-head{margin-bottom:16px}
.orders-back{display:inline-block;font-size:.85rem;text-decoration:none;margin-bottom:4px}
.orders-back:hover{color:var(--gold-text)}
.orders-show-title{margin:8px 0 0;word-break:break-all}
.orders-show-status{margin-top:12px}
.orders-show-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.orders-show-toolbar .btn{min-height:40px}
.orders-show-card{margin-top:4px}
.orders-audit-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:.88rem}
.orders-audit-row:last-child{border-bottom:0}
.orders-audit-time{color:var(--muted);font-size:.8rem;white-space:nowrap}
.orders-mobile{display:none;width:100%;max-width:100%;min-width:0;overflow-x:clip}
.orders-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:0;margin:0 0 14px;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.orders-card-body{padding:16px;min-width:0;display:flex;flex-direction:column;gap:0}
.orders-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:100%;min-width:0;margin-bottom:10px}
.orders-card-meta > a{flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orders-card-meta > .chip{flex:0 0 auto;margin-left:auto}
.orders-card-time{flex:1 0 100%;font-size:.78rem;font-weight:600}
.orders-card-game{font-size:.85rem;margin:0 0 12px;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.orders-card-id{margin:0 0 12px;padding:12px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border-soft);min-width:0}
.orders-card-id-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.orders-card-id .queue-target{min-width:0;gap:8px}
.orders-card-id .queue-target-id{min-width:0;overflow:hidden;text-overflow:ellipsis}
.orders-card-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:0 0 14px;font-size:.9rem;min-width:0}
.orders-card-row > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.orders-card-total{flex-shrink:0;color:var(--gold-text);font-weight:800}
.orders-card-actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%;margin:0;padding-top:14px;border-top:1px solid var(--border);box-sizing:border-box}
.orders-card-actions:has(> .btn:nth-child(2)){grid-template-columns:1fr 1fr}
.orders-card-actions .btn{display:inline-flex;width:100%;min-height:44px;margin:0;justify-content:center;align-items:center;box-sizing:border-box;box-shadow:none}
.orders-card-actions .btn:active{transform:none}
@media (max-width:768px){
  .orders-desktop{display:none!important}
  .orders-mobile{display:block}
  .orders-pager-desktop{display:none}
  .orders-pager-mobile{display:block}
  .orders-audit-row{grid-template-columns:1fr}
  .orders-head{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px}
  .orders-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .orders-head-actions .btn{width:100%;justify-content:center}
  .orders-head-actions-single,
  .orders-head-actions:has(> .btn:only-child){display:flex;grid-template-columns:none;justify-content:flex-start}
  .orders-head-actions-single .btn,
  .orders-head-actions:has(> .btn:only-child) .btn{width:auto;min-width:0}
  .orders-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;-webkit-overflow-scrolling:touch}
  .orders-pills .dash-pill{flex:0 0 auto}
  .orders-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
  .orders-filters > *{flex:none;width:100%;min-width:0;max-width:none}
  .orders-filters .orders-search{grid-column:1 / -1}
  .orders-filter-actions{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .orders-filter-actions .btn{width:100%}
  .orders-filter-actions .btn:only-child{grid-column:1 / -1}
  .orders-show-toolbar{gap:10px}
}

.field-error{margin:6px 0 0;font-size:.82rem;color:var(--danger);font-weight:600}
.flash-ok{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.flash-action{display:inline-flex;align-items:center;margin-left:0;padding:4px 10px;font-weight:700;color:var(--on-gold);background:var(--gold);border-radius:999px;text-decoration:none;font-size:.82rem}
.flash-action:hover{color:var(--on-gold);filter:brightness(1.05)}
.orders-manual-title{display:flex;align-items:center;gap:10px}
.orders-manual-ico{flex-shrink:0;opacity:.9;filter:invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%)}
.orders-manual-form{max-width:560px;gap:16px}
.orders-manual-section{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}

/* Order manual — `Admin Redesign 2.dc.html`, layar 07: form kiri + rail ringkasan kanan. */
.manual-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.manual-form{max-width:none;display:flex;flex-direction:column;gap:12px}
.manual-form .orders-manual-section{padding:16px 18px;gap:12px}
.manual-form .orders-manual-section legend{padding:0;margin-bottom:2px}
.manual-section-2col{grid-template-columns:repeat(2,minmax(0,1fr))}
.manual-section-3col{grid-template-columns:repeat(3,minmax(0,1fr))}
.manual-section-2col legend,.manual-section-3col legend{grid-column:1 / -1}
.manual-span-all{grid-column:1 / -1}
.manual-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;padding:18px}
.manual-rail-title{margin:0;font-size:16px;font-weight:800}
.manual-rail-product{
  display:flex;align-items:center;gap:12px;padding:12px;
  border-radius:12px;border:1px solid var(--border-soft);background:var(--surface-2);
}
.manual-rail-art{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--bg-elevated)}
.manual-rail-art.is-placeholder{
  padding:9px;box-sizing:border-box;object-fit:contain;
  border:1px dashed var(--border-field);
  filter:invert(45%) sepia(6%) saturate(180%) brightness(95%);
}
.manual-rail-name{font-size:14.5px;font-weight:700;line-height:1.3}
.manual-rail-game{font-size:12.5px;margin-top:2px}
.manual-rail-rows{margin:0;display:flex;flex-direction:column}
.manual-rail-rows > div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--divider);font-size:13.5px;
}
.manual-rail-rows dt{color:var(--muted)}
.manual-rail-rows dd{margin:0;font-weight:600;text-align:right;word-break:break-all}
.manual-rail-status{color:var(--muted)}
.manual-rail-status.is-live{color:var(--gold-text);font-weight:700}
.manual-rail-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px}
.manual-rail-total span{color:var(--muted)}
.manual-rail-total strong{font-size:20px;font-weight:700}
.manual-rail-cta{width:100%;justify-content:center}
.manual-rail-hint{margin:0;font-size:12.5px}
.manual-rail-hint[hidden]{display:none}
@media (max-width:1100px){
  .manual-layout{grid-template-columns:1fr}
  .manual-rail{position:static}
  .manual-section-3col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .manual-section-2col,.manual-section-3col{grid-template-columns:1fr}
}
.orders-manual-section legend{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;padding:0}
.orders-manual-note{resize:vertical;min-height:64px;font:inherit;width:100%;box-sizing:border-box}
.orders-manual-summary{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--bg-elevated)}
.orders-manual-summary-label{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.orders-manual-summary-body{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.4;word-break:break-word}
.orders-manual-autopay{padding:12px;border-radius:var(--radius-sm);border:1px solid var(--gold-border);background:var(--gold-bg)}
.orders-manual-hint{margin:8px 0 0;font-size:.8rem}
.orders-manual-autopay-off{margin:0;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);font-size:.88rem}
.orders-manual-empty{margin-top:8px}
.orders-manual-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.orders-manual-form .orders-control{width:100%}
.orders-manual-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.orders-manual-modal[hidden]{display:none!important}
.orders-manual-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.orders-manual-modal-panel{position:relative;z-index:1;width:100%;max-width:380px;padding:20px 18px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow),var(--shadow-gold)}
.orders-manual-modal-title{margin:0 0 8px;font-size:1.05rem;color:var(--gold-text)}
.orders-manual-modal-text{margin:0 0 16px;font-size:.9rem;color:var(--muted);line-height:1.45}
.orders-manual-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
body.orders-manual-modal-open{overflow:hidden}
.dash-split{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;width:100%;min-width:0}
.dash-chart-card{min-height:280px;min-width:0;width:100%}
.dash-chart-wrap{position:relative;height:240px;width:100%;min-width:0}
.dash-chart-wrap canvas{width:100%!important;max-width:100%}
.dash-fallback-bars{display:flex;align-items:flex-end;gap:4px;height:160px;padding-top:8px}
/* Bar ini cuma cadangan kalau Chart.js gagal load. `display:flex` di atas menang
   atas atribut `hidden` (UA cuma `display:none`), jadi tanpa baris ini grafiknya
   tampil dobel. */
.dash-fallback-bars[hidden]{display:none!important}
.dash-fallback-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;height:100%}
.dash-fallback-bar{width:70%;max-width:18px;background:var(--gold);border-radius:4px 4px 0 0;min-height:4px}
.dash-fallback-col span{font-size:.6rem;color:var(--muted-2);white-space:nowrap}

.dash-side-card{display:flex;flex-direction:column;gap:16px}
.dash-side-card .h2{margin:0}
.dash-status-mix{display:flex;flex-direction:column;gap:13px}
.dash-status-row{display:grid;grid-template-columns:78px 1fr 34px;gap:12px;align-items:center}
.dash-status-label{font-size:12.5px;color:var(--muted);font-weight:600}
.dash-status-track{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.dash-status-fill{height:100%;border-radius:4px;min-width:2px;background:var(--muted)}
.dash-fill-wait{background:var(--muted)}
.dash-fill-proc{background:var(--gold)}
.dash-fill-ok{background:var(--ok)}
.dash-fill-bad{background:var(--danger)}
.dash-status-n{font-family:var(--font-mono);font-size:13px;font-weight:700;text-align:right}

.dash-top-block{border-top:1px solid var(--divider);padding-top:14px}
.dash-top-block .admin-group-label{margin:0 0 11px}
.dash-top-row{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.dash-top-row:last-child{margin-bottom:0}
.dash-top-art{width:30px;height:30px;border-radius:9px;object-fit:cover;flex-shrink:0}
.dash-top-art-none{background:var(--surface-3);border:1px solid var(--border-soft)}
.dash-top-name{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-top-n{font-family:var(--font-mono);font-size:13px;color:var(--text-2);flex-shrink:0}

.dash-bar-row{margin-bottom:12px}
.dash-bar-meta{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;margin-bottom:4px}
.dash-bar-meta span:first-child{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-bar-track{height:8px;background:var(--bg-elevated);border-radius:999px;overflow:hidden;border:1px solid var(--border-soft)}
.dash-bar-fill{height:100%;background:var(--gold);border-radius:999px;min-width:2px}

@media (max-width:900px){
  .dash-split{grid-template-columns:1fr}
  .dash-status-row{grid-template-columns:80px 1fr 32px}
}
@media (max-width:768px){
  .dash-period-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .dash-pill{flex:0 0 auto}
  .dash-kpi{grid-template-columns:1fr 1fr}
}

.products-status-chip{
  display:inline-block;margin:0;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:700;
  border:1px solid transparent;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;
}
.products-status-chip.is-on{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.products-status-chip.is-off{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border)}
.products-status-chip.is-local{color:var(--gold-text);background:var(--gold-chip);border-color:transparent;text-transform:uppercase}
/* Ditutup sinkron supplier — bukan merah seperti `.is-off`: ini keadaan
   sementara yang akan pulih sendiri, bukan keputusan admin. Lewat token emas
   supaya ikut tema tanpa override terpisah; dibedakan dari `.is-local` oleh
   bordernya (`.is-local` cuma dipakai di layar metode bayar). */
.products-status-chip.is-supplier-off{color:var(--gold-text);background:var(--gold-chip);border-color:var(--gold-border)}
.admin-group-label{
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 11px;
}
.orders-title{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
@media (max-width:768px){.orders-title{font-size:22px}}
.btn-danger-outline{
  border:1px solid var(--danger-border) !important;color:var(--danger) !important;background:transparent !important;
}
.btn-danger-outline:hover{background:var(--danger-bg) !important}

.games-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px;max-width:720px}
.games-card{display:flex;flex-direction:column;gap:12px;padding:16px}
.games-card.is-off{opacity:.92}
.games-card-top{display:flex;gap:14px;align-items:flex-start}
.games-card-icon{width:72px;height:72px;border-radius:14px;object-fit:cover;border:1px solid var(--border);flex:0 0 auto;background:var(--surface)}
.games-card.is-off .games-card-icon{filter:grayscale(1);opacity:.6}
.games-card-icon-empty{display:grid;place-items:center;font-weight:800;font-size:1.4rem;color:var(--muted);border-style:dashed}
.games-card-name{font-size:1.05rem;font-weight:700;line-height:1.25;margin-bottom:4px}
.games-card-ids{font-size:.8rem;margin-bottom:8px;word-break:break-all}
.games-card-stats{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.82rem}
.games-card-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.games-card-actions form{display:inline;margin:0}
.games-foot-note{margin-top:16px;font-size:.85rem}
.games-ro-chip{padding:8px 12px;border-radius:10px;border:1px dashed var(--border);margin-bottom:4px}
.games-icon-preview{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.games-icon-preview img{border-radius:14px;object-fit:cover;border:1px solid var(--border)}
.games-dropzone{margin-bottom:8px}
.games-cascade-warn{
  margin-top:12px;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(234,179,8,.35);background:rgba(234,179,8,.08);
  display:flex;flex-direction:column;gap:8px;
}

.methods-group{margin-bottom:16px}
.methods-group-title{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.methods-group-title .muted{font-weight:600;font-size:11px;margin-left:6px;letter-spacing:0;text-transform:none}
.methods-panel{border:1px solid var(--border);background:var(--surface);border-radius:16px;overflow:hidden;padding:0}
.methods-row{
  display:grid;grid-template-columns:52px minmax(120px,1.2fr) .7fr .8fr .65fr minmax(140px,1fr);
  gap:14px;padding:15px 20px;align-items:center;font-size:13.5px;border-bottom:1px solid var(--divider);
}
.methods-row:last-child{border-bottom:0}
.methods-row.is-off{opacity:.7}
.methods-row-icon{width:32px;height:32px;border-radius:7px;object-fit:contain;background:var(--surface-2)}
.methods-row-icon-empty{width:32px;height:32px;border-radius:7px;border:1px dashed var(--border-field);background:var(--surface-2)}
.methods-name{font-weight:700}
.methods-code{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-top:2px}
.methods-fee{font-family:var(--font-mono);font-size:13px}
.methods-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.methods-actions form{display:inline;margin:0}
.methods-cards{display:none;flex-direction:column;gap:10px}
.methods-card{padding:14px}
.methods-card.is-off{opacity:.85}
.methods-card-top{display:flex;gap:12px;align-items:flex-start}
.methods-card-top .products-status-chip{margin-left:auto}
.methods-driver-banner{margin-bottom:12px;padding:12px 14px;font-size:.88rem;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.methods-fee-sample{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px dashed var(--border);font-size:.85rem}
.methods-foot-note{margin-top:16px;font-size:12.5px;color:var(--muted)}
/* Banners — `Admin Redesign 2.dc.html`, layar 09: daftar kiri + form bikin baru kanan. */
.banners-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.banners-list{display:flex;flex-direction:column;gap:11px}
.banners-row{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px}
.banners-row.is-off{opacity:.6}
.banners-row-preview{
  aspect-ratio:3/1;border-radius:10px;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--border-soft);display:grid;place-items:center;
}
.banners-row-preview img{width:100%;height:100%;object-fit:cover;display:block}
.banners-row-placeholder{font-size:11px;color:var(--muted-2)}
.banners-row-body{min-width:0;display:flex;flex-direction:column;gap:5px}
.banners-row-title{font-size:15px;font-weight:700;line-height:1.3}
.banners-row-link{font-size:12.5px;color:var(--muted);word-break:break-all}
.banners-row-sort{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--muted)}
.banners-row-sort input{
  width:64px;padding:5px 8px;border-radius:8px;font:inherit;font-weight:700;
  border:1px solid var(--border-field);background:var(--surface-2);color:var(--text);
}
.banners-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.banners-toggle-form{margin:0}
.banners-switch{
  display:flex;align-items:center;gap:9px;padding:0;margin:0;
  background:none;border:0;cursor:pointer;font:inherit;
}
.banners-switch-label{font-size:12.5px;font-weight:700;color:var(--muted)}
.banners-switch.is-on .banners-switch-label{color:var(--ok)}
.banners-switch-track{
  width:40px;height:22px;border-radius:999px;background:var(--surface-3);
  border:1px solid var(--border-field);display:flex;align-items:center;padding:2px;transition:background .15s;
}
.banners-switch.is-on .banners-switch-track{background:var(--gold);border-color:var(--gold)}
.banners-switch-knob{
  width:16px;height:16px;border-radius:999px;background:var(--muted);
  transition:transform .15s,background .15s;
}
.banners-switch.is-on .banners-switch-knob{transform:translateX(18px);background:var(--on-gold)}
.banners-row-actions{display:flex;gap:8px}
.banners-row-actions form{display:inline;margin:0}
.banners-new{display:flex;flex-direction:column;gap:13px;padding:18px}
.banners-new-title{margin:0;font-size:16px;font-weight:800}
.banners-new-field{display:flex;flex-direction:column;gap:6px}
.banners-new-field label{font-size:13px;color:var(--text-2)}
.banners-new-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.banners-new-hint{margin:0;font-size:12.5px}
@media (max-width:1100px){
  .banners-layout{grid-template-columns:1fr}
}
@media (max-width:768px){
  .banners-row{grid-template-columns:1fr;gap:12px}
  .banners-row-side{align-items:stretch}
  .banners-row-actions .btn{min-height:44px}
  .banners-switch{justify-content:space-between;min-height:44px}
}

/* Tab kategori — `Admin Redesign 3.dc.html`, layar 12. Pola sama dengan Banners:
   daftar baris di kiri + kartu bikin baru di kanan (pakai .banners-layout/.banners-new). */
.tabs-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;padding:14px 18px}
.tabs-row.is-off{opacity:.6}
.tabs-row-sort{display:flex;flex-direction:column;font-size:11.5px;color:var(--muted);line-height:1.3}
.tabs-row-sort strong{font-size:14px;color:var(--text-2)}
.tabs-row-body{min-width:0}
.tabs-row-label{font-size:15px;font-weight:700;line-height:1.3}
.tabs-row-slug{font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-all}
.tabs-row-usage{font-size:12.5px;color:var(--muted);white-space:nowrap}
.tabs-row-usage.is-free{color:var(--muted-2)}
.tabs-row-actions{display:flex;gap:8px}
.tabs-row-actions form{display:inline;margin:0}
@media (max-width:768px){
  .tabs-row{grid-template-columns:1fr auto;gap:10px}
  .tabs-row-sort{flex-direction:row;gap:6px;align-items:baseline}
  .tabs-row-body{grid-column:1 / -1}
  .tabs-row-actions{grid-column:1 / -1}
  .tabs-row-actions .btn{min-height:44px}
}

.banners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.banners-card{padding:0;overflow:hidden}
.banners-card-preview{aspect-ratio:3/1;background:var(--surface-2);border-bottom:1px solid var(--divider)}
.banners-card-preview img{width:100%;height:100%;object-fit:cover;display:block}
.banners-card-body{padding:14px 16px}
.banners-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.banners-card-actions form{display:inline;margin:0}
.promo-habis{color:var(--danger);font-weight:700;font-size:11px;text-transform:uppercase}
/* Promo codes — `Admin Redesign 3.dc.html`, layar 13. */
.promo-code{color:var(--gold-text);font-weight:700}
.promo-table td{white-space:nowrap}
.settings-kpi-bad .n{color:var(--danger)}
/* ⚠️ Dulu tiga baris ini menulis warna tema GELAP langsung, tanpa override terang.
   Akibatnya di tema terang kode `200` memakai hijau tema GELAP di atas kartu terang —
   kontras **1,57**, praktis tidak terbaca (11 baris sekaligus di halaman ini).
   Ketemu 2026-08-06 waktu sapuan light per layar; lolos selama ini karena
   `ThemeTokenTest` belum menjaga literal hijau/merah. */
.logs-row-err{background:var(--danger-row)}
.logs-http-ok{color:var(--ok);font-weight:700}
.logs-http-err{color:var(--danger);font-weight:700}

/* Payment logs — `Admin Redesign 4.dc.html`, layar 16. */
.logs-filters{grid-template-columns:minmax(240px,1fr) auto}
.logs-search{
  display:flex;align-items:center;gap:9px;margin:0;min-height:42px;padding:0 13px;
  border:1px solid var(--border-field);border-radius:11px;background:var(--surface);
}
.logs-search img{flex:0 0 auto;opacity:.75}
.logs-search input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:14px;padding:9px 0}
.logs-search input:focus{outline:none}
.logs-pills{margin-bottom:12px}
.logs-pill-saldo{border-color:var(--gold-border);color:var(--gold-text)}
.logs-pill-error{border-color:var(--danger-border);color:var(--danger)}
.logs-card{padding:0;overflow:hidden}
.logs-cat{
  display:inline-block;padding:5px 9px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.logs-cat-keluar{color:var(--text-2);background:var(--surface-3)}
.logs-cat-masuk{color:var(--gold-text);background:var(--gold-chip)}
.logs-cat-saldo,.logs-cat-bot{color:var(--ok);background:var(--ok-bg)}
.logs-order{color:var(--gold-text);font-weight:700}
.logs-event,.logs-time{font-size:12.5px}
.logs-msg-err{color:var(--danger)}
@media (max-width:900px){
  .logs-table .logs-event,.logs-table .logs-time{font-size:12px}
}
/* Warna login ikut token supaya tema terang tidak jadi kartu gelap di kertas terang. */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{width:100%;max-width:380px;padding:28px 24px;border-radius:20px;border:1px solid var(--border);background:var(--surface)}
@media (max-width:900px){
  .methods-row{grid-template-columns:52px 1fr;gap:10px}
  .methods-row > :nth-child(n+3):not(.methods-actions){display:none}
  .methods-actions{grid-column:1 / -1;justify-content:flex-start}
}
@media (max-width:768px){
  .methods-desk{display:none}
  .methods-cards{display:flex}
}

.products-row-actions{display:flex;flex-wrap:nowrap;gap:4px;align-items:center;white-space:nowrap}
.products-row-actions form{display:inline;margin:0}
.products-row-actions .btn{margin:0;padding:6px 8px;font-size:.78rem;min-height:32px}
.products-empty{padding:28px 16px;text-align:center}
.products-empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.products-list-icon{width:32px;height:32px;border-radius:8px;object-fit:cover;border:1px solid var(--border-soft);vertical-align:middle;background:var(--bg-elevated);flex:0 0 auto}
.products-list-icon-empty{display:inline-block;box-sizing:border-box;background:var(--surface);border-style:dashed;opacity:.7}
.products-th-icon,.products-td-icon{width:48px;text-align:center}
.products-icon-current{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.products-icon-current img{width:48px;height:48px;border-radius:10px;object-fit:cover;border:1px solid var(--border)}
.products-icon-pick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.products-icon-option{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;cursor:pointer;padding:6px;border-radius:10px;border:1px solid transparent}
.products-icon-option:has(input:checked){border-color:var(--gold);background:var(--gold-bg)}
.products-icon-option input{accent-color:var(--gold)}
.products-icon-option img{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--border-soft)}
.products-icon-none{font-size:.72rem;color:var(--muted);font-weight:600;padding:10px 6px}
.products-icon-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.products-icon-lib-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.products-icon-lib-card>img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--border-soft);align-self:center}
.products-icon-lib-meta{display:grid;gap:8px;margin:0}
.products-head-actions{gap:8px}
@media (max-width:768px){
  .products-head-actions{grid-template-columns:1fr 1fr}
  .products-head-actions .btn{min-height:44px;font-size:.82rem;padding:8px 10px}
  .products-head-actions .btn-primary{order:4}
}
.products-card-actions{grid-template-columns:1fr 1fr !important}
.products-card-actions form{margin:0;display:block}
.products-card-actions form .btn{width:100%}
.products-card-actions form:last-child{grid-column:1 / -1}
.orders-filter-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.products-bulk-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--gold-border);background:var(--gold-chip);
  position:sticky;top:0;z-index:40;
}
@media (max-width:768px){
  .products-bulk-bar{top:52px}
  .products-filters .orders-search{grid-column:1 / -1}
}
.products-bulk-bar[hidden]{display:none!important}
.products-bulk-select-all{display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;font-size:.9rem;font-weight:700;color:var(--gold-text)}
.products-bulk-select-all input{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.products-bulk-btns{display:flex;flex-wrap:wrap;gap:8px}
.products-th-check,.products-td-check{width:36px;text-align:center;vertical-align:middle}
.products-th-check input,.products-td-check input,.products-card-check input{
  width:18px;height:18px;accent-color:var(--gold);cursor:pointer;
}
.products-card-meta{gap:10px;align-items:center}
.products-card-check{flex:0 0 auto;display:flex;align-items:center;margin:0;cursor:pointer}
.products-card-meta > a{flex:1 1 auto;min-width:0}

/* Tabel produk — `Admin Redesign 2.dc.html`, layar 05.
   Nama jadi kolom utama (game turun jadi baris kecil), tab pakai chip,
   harga mono, dan baris nonaktif diredupkan supaya kebaca sekilas. */
.products-td-name strong{display:block;font-weight:700;line-height:1.3}
.products-td-game{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.products-tab-chip{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid var(--border-soft);background:var(--bg-elevated);color:var(--text-2);
}
.products-td-price{font-family:var(--font-mono);font-weight:700;white-space:nowrap}
.products-status-flat{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.products-row-off > td{opacity:.55}
.products-row-off .products-row-actions{opacity:1}
.products-table-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 20px;border-top:1px solid var(--divider);font-size:13px;
}
.products-table-foot .orders-pager{margin:0}
.products-foot-note{margin:12px 0 0;font-size:12.5px;color:var(--muted)}

/* Dropzone upload — dipakai layar Ikon produk & Banners. */
.dk-dropzone{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:22px 16px;border-radius:13px;border:1px dashed var(--border-field);
  background:var(--surface-2);text-align:center;
}
.dk-dropzone.is-over{border-color:var(--gold);background:var(--gold-bg)}
.dk-dropzone.has-file{border-style:solid}
.dk-dropzone-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.dk-dropzone-title{font-size:14px;font-weight:700}
.dk-dropzone-hint{font-size:12.5px;color:var(--muted)}
.dk-dropzone-file{font-size:12px;color:var(--gold-text);word-break:break-all}
.dk-dropzone .btn{margin-top:4px}

/* Layar Ikon produk — `Admin Redesign 2.dc.html`, layar 06. */
.icons-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.icons-upload{display:flex;flex-direction:column;gap:14px;padding:18px}
.icons-upload-title{margin:0;font-size:16px;font-weight:800}
.icons-upload-field{display:flex;flex-direction:column;gap:6px}
.icons-upload-field label{font-size:13px;color:var(--text-2)}
.icons-library{display:flex;flex-direction:column;gap:11px}
.icons-library-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:12.5px;
}
.icons-library-count{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.icons-usage{font-size:12.5px;color:var(--muted);text-align:center}
.icons-usage.is-free{color:var(--muted-2)}
.icons-card-actions{display:flex;gap:8px;justify-content:center}
.icons-card-actions form{display:inline;margin:0}
@media (max-width:900px){
  .icons-layout{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   R3.1 — BERANDA (desain 1a: Store 1a Semua Screen.dc.html, layar 01)
   ═══════════════════════════════════════════════════════════════ */

/* Header: pill "Lacak" tunggal */
.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none !important;
}
.header-pill.active { border-color: var(--gold-border); color: var(--gold-text); }
/* Pil akun: inisial/avatar + nama. Nama panjang dipotong, BUKAN dibiarkan
   mendorong logo brand keluar layar — header cuma 375px di HP. */
.header-pill-akun { max-width: 46vw; padding-left: 5px; }
.header-pill-ava {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-bg);
  color: var(--gold-text);
  border: 1px solid var(--gold-border);
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 800;
  flex-shrink: 0;
  object-fit: cover;
}
.header-pill-nama {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.header-pill.active img { filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%); }

/* Saldo di header (2026-08-06) — DESKTOP saja, lihat catatan di layouts/store.
 *
 * Sengaja TIDAK dinamai "chip": di toko ini "chip" itu nama produk (Higgs/Domino),
 * sementara katalognya juga berisi item game lain. Menyebut elemen saldo sebagai
 * "chip saldo" bikin dua hal berbeda punya nama yang sama (keputusan user).
 *
 * Tinggi ikut `.header-pill` (34px), BUKAN 42px seperti di desain: seluruh pill
 * header kita 34px, jadi satu elemen 42px berdiri sendiri justru terlihat rusak.
 * Selisih tinggi itu beda lama di seluruh header, bukan urusan elemen ini.
 */
/* Blok saldo lama DICABUT 2026-08-17 — diganti versi baru di bagian
   "Header sapaan + tema + saldo" di akhir berkas ini.
   Yang dicabut dan kenapa:
   - `.header-actions a.header-saldo { display:none }` + override `>=1024px`:
     saldo sekarang tampil di HP juga (permintaan user). ⚠️ Aturan lama ini
     spesifisitasnya (0,2,1) MENGALAHKAN aturan baru, jadi membiarkannya berarti
     saldo tetap hilang di HP tanpa satu pun error — ketahuan dari tesnya, bukan
     dari mata.
   - `.header-saldo-ico` (+ override terang): ikon dompetnya tidak dirender lagi;
     blok saldo sekarang label + angka + tombol "+". */

/* Banner: satu slide tampil, dots = jumlah banner aktif */
.banner-slider { overflow: hidden; margin-bottom: 4px; }
.banner-track { display: flex; transition: transform .35s ease; }
.banner-slide { flex: 0 0 100%; min-width: 100%; }
/* 3 / 1 di SEMUA lebar layar, sama dengan ukuran unggah yang diminta admin
   (1800x600). Dulu di HP kotaknya 2 / 1 sementara gambarnya 3 / 1, dan
   `object-fit: cover` memotong 16,7% di kiri DAN kanan — banner pertama yang
   diunggah user langsung kehilangan judulnya (2026-08-01: "HIGGS GAMES ISLAND"
   terbaca "GGS ES ISLAND" di HP).

   Kotaknya yang harus ikut ukuran yang kita minta, bukan karya admin yang
   dikorbankan. Kalau rasio ini diubah lagi, ubah juga petunjuk unggah di
   admin/banners — dua-duanya dijaga BannerAspectTest. */
.banner-slide img,
.banner-slide a {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.banner-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 1;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
.banner-dots { display: flex; justify-content: center; gap: 6px; margin-top: 11px; }
.banner-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #33333A;
  cursor: pointer;
  transition: width .2s, background .2s;
}
.banner-dot.is-on { width: 18px; background: var(--gold); }

/* Search game */
.game-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  margin: 18px 0 0;
  padding: 0 13px;
  border: 1px solid var(--border-field);
  border-radius: 12px;
  background: var(--surface);
}
.game-search img { flex-shrink: 0; }
.game-search input {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: 100%;
  font-size: 14.5px;
  color: var(--text);
}
.game-search input:focus { outline: none; box-shadow: none !important; }
.game-search input::placeholder { color: var(--muted); }
.game-search-empty { color: var(--muted); font-size: 13.5px; padding: 4px 2px 0; }

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 12px;
}
.home-section-head .muted { font-size: 13px; }

/* Grid game 3 kolom di HP, artwork 1:1 (dari 2 kolom, 2026-08-12).

   Nama kelasnya SENGAJA tidak diganti jadi `-3`: dipakai dua kali di home dan dua
   tempat di CSS ini, dan mengganti nama demi kerapian menaruh risiko rename yang
   meleset di tempat yang tidak ada tesnya. Angka di nama kelas jadi bohong — itu
   harga yang lebih murah daripada kelas yatim.

   ⚠️ `minmax(0, 1fr)`, BUKAN `1fr` telanjang. `1fr` sendirian = `minmax(auto, 1fr)`,
   dan `auto` di situ min-content: kolomnya menolak menyempit di bawah isi terlebarnya.
   Di 375px tiga kolom cuma dapat ~106px, jadi satu nama game panjang sudah cukup
   mendorong kolom melewati kotaknya. Jebakan yang sama sudah memakan `.nom-grid`
   2026-08-07 — lihat CLAUDE.md. */
.game-grid-2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.game-grid-empty { grid-column: 1 / -1; }
.game-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  color: var(--text);
  text-decoration: none !important;
  transition: border-color .15s;
}
.game-card:hover { border-color: var(--border-field); }
.game-card--unavailable {
  cursor: default;
  pointer-events: none;
  opacity: 0.92;
}
.game-card--unavailable .game-card-art {
  filter: grayscale(1);
  opacity: 0.55;
}
.game-card--unavailable .game-card-name { color: var(--muted); }
.game-card--unavailable .game-card-price {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.game-card-art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.game-card-art-empty {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 10px, var(--surface-2) 10px 20px);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}
/* Kolom menyempit dari ~168px jadi ~106px waktu gridnya jadi 3, jadi teksnya ikut
   turun — tapi berhenti di 12,5/11,5px, bukan sekecil yang muat. Batas 11px di
   CLAUDE.md itu LANTAI, dan nama game yang tidak terbaca membuat kartunya tidak ada
   gunanya sama sekali. */
.game-card-body { padding: 9px 10px 11px; min-width: 0; }
/* Dipotong 2 baris supaya tinggi kartu satu baris grid sama rata — itu inti
   permintaan "biar rapi". Di 3 kolom nama panjang seperti "Mobile Legend : Bang Bang"
   memakai 3 baris sementara tetangganya 1, dan barisnya jadi bergerigi.
   Yang terpotong dapat elipsis, bukan hilang diam-diam. */
.game-card-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;   /* dua baris, jadi nama satu baris tidak memendekkan kartunya */
}
.game-card-price { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.game-card-request {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 14px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border-field);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none !important;
}
.game-card-request img { opacity: .85; }
.game-card-request-title { font-size: 13px; font-weight: 700; }
.game-card-request-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* Kartu order berjalan */
.running-order {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 14px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  text-decoration: none !important;
}
.running-order-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--gold-bg);
}
.running-order-body { flex: 1; min-width: 0; }
.running-order-title { display: block; font-size: 14px; font-weight: 700; }
.running-order-meta {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-all;
}
.running-order-cta { font-size: 13px; font-weight: 700; color: var(--gold-text); flex-shrink: 0; }

/* Deretan logo metode bayar */
.pay-logos {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}
.pay-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
}
/* Ikon SVG repo (QRIS): tetap kotak kecil seperti semula. */
.pay-logo img { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; }
/* Logo brand unggahan: horizontal 3:1 sampai 5:1, jadi butuh kotak melebar +
   alas terang — perlakuan yang sama dengan baris metode di layar order. Tanpa
   ini logonya dijejalkan ke kotak persegi dan tampak gepeng. */
.pay-logo img.is-brand {
  width: 58px;
  height: 26px;
  padding: 4px 9px;
  background: #F5F3EF;
  border-radius: 7px;
}

/* Elemen yang di-toggle lewat atribut [hidden] tapi punya class ber-display:
   class menang atas UA style, jadi harus dimatikan eksplisit. */
.running-order[hidden],
.game-card-request[hidden],
/* `display:flex` menang atas `[hidden]` bawaan browser — tanpa baris ini judul
   bagian tetap terlihat saat pencarian menyaring habis kartu di bawahnya. */
.home-section-head[hidden],
.pay-logos[hidden] { display: none !important; }

/* Desain 1a: nama brand di header store putih, bukan emas (emas dipakai hemat). */
.header .brand { color: var(--text); }

/* Footer link duduk di dalam frame, di atas bottom nav (bukan di bawahnya). */
.shell .site-footer { padding: 22px 16px 26px; }

/* Tanpa banner aktif, search naik rapat ke header (blok banner memang hilang). */
.page > .game-search:first-child { margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   R3.2 — ORDER satu scroll (Store 1a Semua Screen.dc.html, layar 02)
   ═══════════════════════════════════════════════════════════════ */

.order-head-game {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text);
}
.order-head-game img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.order-head-game span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.order-sec { margin-bottom: 24px; }
.order-sec .group-label { margin: 0 0 10px; }
.order-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.order-save-id { margin-top: 10px; font-size: 13px; }

/* Player ID — field besar mono, emas saat terisi */
.pid-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  transition: border-color .15s;
}
.pid-field.is-filled { border-color: var(--gold); }
/* Zona: kotak kedua di bawah Player ID, sengaja lebih pendek supaya kelihatan
   pelengkap, bukan field sederajat yang bikin orang ragu mana yang utama. */
.pid-field-zone { height: 46px; margin-top: 8px; }
.pid-field-zone input { font-size: 15px; }

/* ——— Cek ID ———
   Baris pembantu, bukan penjaga pintu. Tombolnya GARIS, tidak pernah emas: layar
   order sudah memakai jatah emasnya untuk tombol Bayar, dan pembantu yang berteriak
   sekeras aksi utama membuat orang menekan yang salah. */
.cekid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.cekid-btn { flex-shrink: 0; }
.cekid-out {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cekid-out[hidden] { display: none !important; }
/* Tebal cuma untuk NAMA PEMAIN — dia satu-satunya yang pendek dan memang jawaban
   yang dicari. Sisanya kalimat utuh dari hub, kadang empat baris.
   Sejak cek ID jalan otomatis (2026-08-09) nama akun muncul sendiri tanpa ada yang
   menekan apa pun, jadi dia dijadikan PIL: kalau bentuknya sama dengan teks bantu di
   sekitarnya, jawaban yang datang tanpa diminta gampang tidak disadari. */
.cekid-out.is-ok {
  color: var(--ok);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--ok-bg);
}
/* `is-salah` merah, TAPI tombol bayar tetap hidup — ini kabar, bukan penghalang.
   Bobotnya diturunkan 2026-08-08: pesan Higgs yang panjang (dan berakhir "Order tetap
   bisa dilanjutkan") tampil empat baris merah TEBAL dan terbaca seperti galat yang
   memblokir. Merahnya sendiri sudah cukup jadi sinyal. */
.cekid-out.is-salah { color: var(--danger); font-weight: 500; }
/* `unknown` + `unsupported` masuk sini. NADA INFORMASI, bukan merah: pembatas laju
   upstream dan akun buatan negara lain dua-duanya jatuh ke keadaan ini, dan layar
   yang memerahkannya akan sering terlihat rusak padahal tidak ada yang rusak. */
.cekid-out.is-info { color: var(--muted); font-weight: 500; }
.cekid-out.is-tunggu { color: var(--muted-2); font-weight: 500; }
.order-hint-err { color: var(--danger); }

/* ——— "Kolom ini belum diisi" di halaman order (2026-09-25) ———
   Tombol Bayar nol pernah dimatikan lagi (alasannya di `order/show.blade.php`), jadi
   yang menerangkan kekurangannya dua: keterangan di bar bawah, dan kotak merah ini
   yang DIPINDAHKAN ke sebelah kolom yang kosong waktu tombolnya ditekan. */
.order-kurang {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger);
}
/* `!important` DIPERLUKAN di sini, bukan malas: `.pid-field.is-filled` menyetel
   `border-color` juga dan menang lewat urutan berkas, jadi kolom yang PERNAH terisi
   lalu dikosongkan lagi nol akan pernah memerah tanpa ini. */
.pid-field.is-kurang,
.tg-field.is-kurang { border-color: var(--danger) !important; }
/* Nominal & metode nol punya kotak kolom — yang memerah judul bagiannya. */
.order-sec.is-kurang .group-label { color: var(--danger); }
.pid-field input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.pid-field input:focus { outline: none; box-shadow: none !important; }
.pid-field input::placeholder { font-family: var(--font); font-size: 14.5px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.pid-saved { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: var(--ok); }

/* Nominal — pills + grid 2 kolom */
.nom-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.nom-tab {
  min-height: 44px;
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nom-tab.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 700;
}

/* `minmax(0, 1fr)`, BUKAN `1fr`. `1fr` sendirian berarti `minmax(auto, 1fr)`, dan
   `auto` di sini adalah **min-content** — kolomnya menolak menyempit di bawah lebar
   isi terlebarnya. Badge (HEMAT/FLASH) punya `flex-shrink: 0`, jadi begitu ada satu
   kartu berbadge, min-content-nya melompat ~24px per kolom dan seluruh baris meluber
   ke luar kotak grid: kolom kanan terpotong di layar 390px. Ketahuan 2026-08-07 waktu
   badge FLASH jadi badge pertama yang benar-benar terpakai di data nyata. */
.nom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nom-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.nom-card[hidden] { display: none !important; }
.nom-card:hover { border-color: var(--border-field); }

/* Ditutup gerbang stok supplier — dipajang abu-abu, bukan disembunyikan
   (permintaan user 2026-08-18, meniru `daengkoin.store`). Yang ditutup ADMIN
   tidak pernah sampai ke sini.

   ⚠️ Warnanya diturunkan lewat TOKEN, bukan `opacity` pada kartunya. `opacity`
   mengalikan kontras teks terhadap latar yang sudah dinilai `KontrasTokenTest`,
   jadi pasangan yang lolos 4,5:1 diam-diam jatuh di bawah ambang — dan tidak ada
   penjaga yang melihatnya, karena yang dijaga nilai tokennya, bukan hasil kali
   opacity-nya. `--muted` di `--surface` sudah dinilai dan lolos. */
.nom-card.is-habis {
  cursor: not-allowed;
  border-style: dashed;
  background: var(--surface-2);
}
.nom-card.is-habis:hover { border-color: var(--border); }
.nom-card.is-habis .nom-card-name,
.nom-card.is-habis .nom-card-price { color: var(--muted); }
/* Ikon saja yang diredupkan — dia gambar, bukan teks, jadi tidak punya ambang
   kontras yang bisa dilanggar. */
.nom-card.is-habis .nom-card-icon { filter: grayscale(1); opacity: .55; }
.nom-card-habis {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.nom-card.selected { border: 1.5px solid var(--gold); background: var(--gold-bg); }
.nom-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.nom-card-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--border-field);
  background: var(--surface-2);
}
.nom-card-icon-empty {
  display: block;
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px);
}
.nom-card.selected .nom-card-icon { border-color: var(--gold-border); }
.nom-card-name { font-size: 15px; font-weight: 700; line-height: 1.2; min-width: 0; }
.nom-card-price { font-size: 15.5px; }
.nom-card.selected .nom-card-price { color: var(--gold-text); }

/* Metode bayar — kartu baris */
.pay-list { display: flex; flex-direction: column; gap: 9px; }
.pay-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pay-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-opt.selected { border: 1.5px solid var(--gold); background: var(--gold-bg); }
.pay-opt-icon { width: 30px; height: 30px; flex-shrink: 0; border-radius: 6px; object-fit: contain; }
/* Logo brand yang diunggah (PNG dengan area putih bawaan). Alas terang +
   sedikit padding: tanpa itu logonya tenggelam di kartu gelap dan terlihat jauh
   lebih kecil daripada ikon SVG di sebelahnya. Lebar 38px supaya logo horizontal
   (DANA, Alfamart) tidak menyusut mengikuti sisi terpendeknya. */
.pay-opt-icon.is-brand {
  /* Logo brand itu gambar SANGAT horizontal: DANA 3,3:1 · ShopeePay 5:1 ·
     VA BRI 4,2:1 — sementara kotaknya cuma 1,4:1. `object-fit: contain`
     menyesuaikan sisi yang paling sesak (lebar), jadi logo menyentuh dinding
     kiri-kanan persis: sisa 0px, terukur di browser. Atas-bawah justru sisa
     10–13px.

     Percobaan pertama saya meninggikan kotak — menambah ruang di sisi yang
     sudah berlebih dan tidak menyentuh sebabnya. Yang benar: lebih LEBAR,
     sedikit lebih pendek, dengan padding samping yang tegas. */
  width: 68px;
  height: 34px;
  padding: 6px 12px;
  background: #F5F3EF;
  border-radius: 8px;
}
.pay-opt-icon-empty { display: block; background: var(--surface-2); border: 1px solid var(--border-field); }
.pay-opt-body { flex: 1; min-width: 0; }
.pay-opt-name { display: block; font-size: 14.5px; font-weight: 700; }
.pay-opt-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.pay-opt-check {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--gold);
  color: var(--on-gold);
  visibility: hidden;
}
.pay-opt.selected .pay-opt-check { visibility: visible; }
/* Total per metode — angka yang benar-benar dibayar kalau baris itu dipilih.
   Biaya gateway beda-beda tiap metode; tanpa angka ini customer harus
   menghitung sendiri "harga + berapa persen" untuk membandingkan. */
.pay-opt-total {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: -.01em;
}
.pay-opt.selected .pay-opt-total { color: var(--gold-text); }
/* Baris saldo buat pengunjung yang belum punya akun: tautan, bukan pilihan.
   Ditampilkan justru supaya harga tanpa biaya admin kelihatan sebelum daftar. */
/* Kanal yang nominalnya belum cukup: DIPAJANG abu-abu beserta alasannya, bukan
   disembunyikan. Pola yang sama dengan nominal tertutup gerbang stok — yang hilang
   diam-diam bikin orang mengira metodenya memang nol ada. Warnanya lewat token
   supaya ikut tema; hex telanjang di sini tetap hitam di tema terang. */
.pay-opt.is-min-kurang { opacity: .55; cursor: not-allowed; }
.pay-opt.is-min-kurang .pay-opt-name,
.pay-opt.is-min-kurang .pay-opt-total { color: var(--muted); }
.pay-opt.is-min-kurang .pay-opt-desc { color: var(--danger); }

.pay-opt-locked { text-decoration: none; color: inherit; }
.pay-opt-locked .pay-opt-total { color: var(--gold-text); }

.pay-more-btn {
  min-height: 44px;
  margin-top: 9px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.pay-more-btn:hover { color: var(--text); }
.pay-more[hidden] { display: none !important; }
.pay-more { margin-top: 9px; }

/* Kontak */
.tg-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
}
.tg-field img { flex-shrink: 0; }
.tg-field input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  height: 100%;
  font-size: 15px;
  color: var(--text);
}
.tg-field input:focus { outline: none; box-shadow: none !important; }

.link-gold {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-text);
  cursor: pointer;
  text-decoration: underline;
}
.order-extra { margin-top: 12px; }
.order-extra[hidden] { display: none !important; }

/* Sticky bar: keterangan di atas, total mono besar di bawah (urutan desain) */
.sticky-bar .sticky-meta .total-hint {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.sticky-bar .total { font-size: 21px; }

/* ——— Sheet konfirmasi sebelum bayar ———
   Sheet dari bawah, di semua lebar (dikunci ke kolom lewat `--max`). Isinya cuma MEMBACAKAN ULANG
   apa yang sudah dipilih — tidak ada field yang bisa diubah di sini, supaya
   satu-satunya keputusan yang tersisa adalah "benar" atau "balik".

   Hasil Cek ID ikut ditempel di sini, TAPI tetap sesuai kontraknya: tombol
   "Bayar sekarang" tidak pernah dimatikan olehnya, termasuk waktu ID-nya memang
   tidak ketemu. Peringatan merah + tombol yang tetap hidup adalah maksudnya. */
.order-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.order-sheet[hidden] { display: none !important; }
.order-sheet-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); }
.order-sheet-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-frame) var(--radius-frame) 0 0;
  background: var(--bg-elevated);
  animation: order-sheet-naik .18s ease-out;
}
.order-sheet-grip {
  width: 42px;
  height: 4px;
  margin: 0 auto 13px;
  border-radius: var(--radius-pill);
  background: var(--border-field);
}
.order-sheet-title { margin: 0 0 3px; font-size: 18px; font-weight: 800; color: var(--text); }
.order-sheet-sub { margin: 0 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
/* Garis antar baris dari `gap` di atas latar divider — bukan border per baris,
   supaya baris pertama & terakhir tidak perlu aturan sendiri. */
.order-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--divider);
  overflow: hidden;
}
.order-sheet-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  background: var(--surface);
}
.order-sheet-row[hidden] { display: none !important; }
.order-sheet-k { flex-shrink: 0; font-size: 12.5px; color: var(--muted); }
.order-sheet-v {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}
/* Nama akun dari Cek ID — hijau, karena inilah satu-satunya baris yang benar-benar
   datang dari server gamenya dan bukan ketikan pembeli. */
.order-sheet-v.is-nick { color: var(--ok); }
/* Total menempel di tombolnya — bentuk yang sama dengan sticky bar halaman order.
   Blok emas berdiri sendiri sudah dicoba dan dicabut 2026-08-09: totalnya jadi muncul
   dua kali di satu layar (blok + sticky bar di belakangnya), dan angka kembar bikin
   orang mencari bedanya padahal yang dicari cuma satu — berapa yang keluar kalau
   tombol ini ditekan. */
.order-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.order-sheet-foot-meta { min-width: 0; }
.order-sheet-foot-k {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.order-sheet-foot-v { font-size: 21px; color: var(--gold-text); }
/* 44px, bukan 42 bawaan `.btn`. Terukur di produksi 2026-08-09: "Bayar sekarang"
   42px sementara "Ubah dulu" (btn-block) 44px — tombol yang memindahkan uang justru
   yang di bawah batas tap, dan yang membatalkan yang memenuhinya. */
.order-sheet-foot .btn { flex-shrink: 0; min-height: 44px; }
.order-sheet-batal { margin-top: 10px; min-height: 44px; }
/* Kotak catatan. Bawaannya NADA INFORMASI: keadaan yang paling sering muncul
   adalah "belum dicek" / "belum bisa dicek", dan memerahkan itu membuat layar
   sering terlihat rusak padahal tidak ada yang rusak. Merah cuma untuk `invalid`. */
.order-sheet-warn {
  margin-top: 12px;
  padding: 12px 13px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.order-sheet-warn[hidden] { display: none !important; }
.order-sheet-warn-t { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.order-sheet-warn-d { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.order-sheet-warn.is-bahaya { border-color: var(--danger-border); background: var(--danger-bg); }
.order-sheet-warn.is-bahaya .order-sheet-warn-t { color: var(--danger); }
.order-sheet-warn.is-bahaya .order-sheet-warn-d { color: var(--text-2); }
/* Kunci scroll halaman di belakang sheet. */
.order-sheet-open { overflow: hidden; }
/* Tombol chat admin melayang di `bottom: sticky-h + 12px` — persis setinggi kaki
   sheet, jadi headsetnya mendarat di atas tombol "Bayar sekarang". Veil saja tidak
   cukup: yang dilaporkan user 2026-08-09 bukan cuma terlihat, tapi MENGHALANGI.
   Selama sheet terbuka tidak ada yang perlu dihubungi — keputusannya cuma dua. */
.order-sheet-open .cs-fab-wrap { display: none; }

@keyframes order-sheet-naik { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .order-sheet-panel { animation: none; } }


/* ═══════════════════════════════════════════════════════════════
   R3.3 — BAYAR QRIS / pending (Store 1a Semua Screen.dc.html, layar 03)
   ═══════════════════════════════════════════════════════════════ */

/* Banner sisa waktu */
.pay-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--gold-chip);
  border: 1px solid var(--gold-border);
  margin-bottom: 16px;
}
.pay-timer-label { font-size: 13px; font-weight: 700; color: var(--gold-text); }
.pay-timer-clock { font-size: 15px; color: var(--gold-text); }
/* `is-out` = waktu habis. Ikut gaya mendesak: kalau customer membuka halaman
   yang sudah lewat batas, `is-urgent` tidak pernah sempat terpasang (hitung
   mundurnya langsung nol), jadi tanpa ini timernya tampil netral seolah masih
   ada waktu — sampai halaman memuat ulang sedetik kemudian. */
.pay-timer.is-urgent,
.pay-timer.is-out { background: var(--danger-bg); border-color: var(--danger-border); }
.pay-timer.is-urgent .pay-timer-label,
.pay-timer.is-urgent .pay-timer-clock,
.pay-timer.is-out .pay-timer-label,
.pay-timer.is-out .pay-timer-clock { color: var(--danger); }

/* Kertas terang — QR harus di atas latar terang supaya kamera bisa memindai */
.qr-paper {
  background: #F5F3EF;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.qr-box {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, #E7E3DA 0 8px, #F5F3EF 8px 16px);
  display: grid;
  place-items: center;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: #fff; }
/* QR asli (SVG inline, App\Support\QrImage). Latar putih penuh + padding: kamera
   butuh quiet zone terang, dan garis miring placeholder di belakangnya bikin
   pemindaian gagal kalau sampai kelihatan. */
.qr-img { width: 100%; height: 100%; background: #fff; border-radius: 12px; padding: 10px; display: grid; place-items: center; }
.qr-img svg { width: 100%; height: 100%; display: block; }
/* Kotak QR dibatasi 340px dan ditengahkan. Tanpa ini QR ikut melar mengikuti
   lebar kartu — di desktop (kartu 920px) jadi kotak raksasa setinggi layar,
   yang bukan cuma jelek: kamera HP justru susah fokus ke QR sebesar itu.
   Di mobile 390 lebarnya memang sudah di bawah batas, jadi tidak berubah. */
.qr-paper .qr-box { max-width: 340px; margin-inline: auto; }
.qr-placeholder {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #6E6D68;
  text-align: center;
  line-height: 1.5;
}
.qr-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0B0B0C;
}

.qr-string-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface-2);
  margin-bottom: 14px;
}
.qr-string {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Total + Salin nominal */
.pay-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--border-field);
  border-radius: 14px;
  background: var(--surface-2);
  margin-bottom: 16px;
}
.pay-total-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pay-total-value { font-size: 20px; margin-top: 2px; }
.pay-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.pay-copy:hover { color: var(--text); }

/* Cara bayar */
.pay-steps-label { margin: 0 0 10px; }
.pay-steps {
  list-style: none;
  margin: 0 0 16px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pay-steps li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.pay-step-n { color: var(--gold-text); flex-shrink: 0; }

.pay-actions { display: flex; flex-direction: column; gap: 10px; }
.pay-actions form { margin: 0; }
.pay-foot {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 0 0;
}

.pay-oid {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  font-size: 13px;
}
.pay-oid-label { color: var(--muted); }
.pay-oid .mono { color: var(--text-2); word-break: break-all; }

/* Badge HEMAT di kartu nominal — ditandai manual di admin (products.is_best_value) */
.nom-card-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ok);
  background: var(--ok-bg);
  padding: 3px 7px;
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════════
   FLASH SALE — strip beranda, bar halaman order, harga coret
   ═══════════════════════════════════════════════════════════════

   MERAH, bukan emas. Layar order sudah memakai jatah emasnya untuk tombol Bayar
   (CLAUDE.md: 1 layar = 1 tombol emas terisi), dan promo yang ikut emas membuat dua
   hal berteriak sama keras — yang kalah justru tombol yang menghasilkan uang.

   Dan merah pun dipakai HEMAT, dengan aturan yang sama. Percobaan pertama memberi
   tiap kartu promo bingkai merah penuh; hasilnya deretan kotak merah di sebelah kartu
   game yang netral, dan itulah yang membuat beranda terasa jomplang — bukan warnanya,
   tapi banyaknya. Sekarang kartu promo memakai border yang SAMA dengan kartu game,
   dan merah cuma menyala di tiga titik: ikon petir, angka mundur, chip potongan. */

/* ——— Timer bersegmen: satu komponen, dua halaman ——— */
.sale-timer { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.sale-timer-seg {
  min-width: 25px;
  padding: 3px 5px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--danger);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  /* Angka detik berganti tiap detik; tanpa lebar tetap per segmen, "9" dan "10"
     menggeser seluruh baris dan timernya terlihat bergoyang. */
  font-variant-numeric: tabular-nums;
}
.sale-timer-sep { color: var(--muted-2); font-size: 11px; font-weight: 700; }

/* Ikon repo pakai `stroke="currentColor"`; sebagai <img> dia butuh filter, kalau tidak
   yang muncul bulatan hitam (CLAUDE.md § Ikon). Difilter ke merah `--danger`. */
.ico-flash { filter: invert(58%) sepia(52%) saturate(2400%) hue-rotate(325deg) brightness(97%); }

/* ——— Bar di halaman order ———
   Alas `--surface`, bukan merah penuh: bar ini duduk tepat di atas grid nominal yang
   sudah punya kartu berchip merah. Dua lapis merah bertumpuk membuat yang mana pun
   berhenti terbaca sebagai penekanan. */
.sale-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
}
.sale-bar-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--danger);
}
.sale-bar-text { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); }

/* ——— Kartu nominal yang sedang promo ———
   TIDAK memakai badge berkata-kata. Kartunya cuma ~168px di HP, dan badge di baris
   nama mendesak nama produk sampai patah dua baris. Penandanya pindah ke baris harga
   sebagai persen — lebih ringkas, dan sekaligus memberi tahu potongannya. */
.nom-card.is-flash { border-color: var(--danger-border); }
.nom-card.is-flash.selected { border-color: var(--gold); }

/* Harga coret duduk di BARIS SENDIRI: kolomnya ~168px di HP, dan dua harga
   berdampingan patah di tengah angka ("Rp" / "1.953"). */
.nom-card-price-old {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}
.nom-card-price-old s { text-decoration: line-through; }
.nom-card-off {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* ——— Daftar harga: barisnya selebar layar, jadi dua harga tetap sebaris ——— */
.price-row-badge.is-flash {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}
.price-row-price-old {
  margin-right: 6px;
  color: var(--muted);
  font-size: .82em;
  font-weight: 500;
  text-decoration: line-through;
}

/* ——— Strip flash sale di beranda ———
   Baris yang DIGESER, bukan grid: promo bisa 2 kartu bisa 12, dan grid yang tingginya
   berubah-ubah mendorong daftar game turun-naik tiap promo berganti. */
.fs-strip { margin: 20px 0 4px; }
.fs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.fs-head-text { min-width: 0; }
.fs-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.fs-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

/* Pembungkus rail: jangkar untuk panah yang melayang di tepi. */
.fs-rail-wrap { position: relative; }

/* Panah cuma untuk TETIKUS. Di HP jari sudah menggeser langsung, dan panah di sana
   cuma memakan lebar yang lebih berguna untuk kartu. */
.fs-nav { display: none; }
.fs-nav[hidden] { display: none !important; }

.fs-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* Kartu berhenti rapi di tepi kiri waktu digeser — geseran bebas hampir selalu
     berhenti di tengah kartu dan menyisakan potongan yang terlihat seperti bug. */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.fs-rail::-webkit-scrollbar { display: none; }
/* Selama diseret: snap dimatikan (kalau tidak, barisnya melompat-lompat melawan
   tarikan) dan kursor jadi genggaman supaya jelas barisnya sedang dipegang. */
.fs-rail.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .fs-rail { cursor: grab; } }

.fs-card {
  scroll-snap-align: start;
  flex: 0 0 146px;
  /* `min-width: 0` wajib. Item flex bawaannya `min-width: auto`, dan nama game di
     dalamnya `white-space: nowrap` — min-content kartu jadi selebar nama game penuh,
     jadi `flex-basis` diabaikan dan kartunya melar (terukur 165px). */
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none !important;
  transition: border-color .15s;
}
.fs-card:hover { border-color: var(--border-field); }

.fs-card-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.fs-card-icon { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.fs-card-icon-empty { background: var(--surface-2); border: 1px solid var(--border); }
.fs-card-off {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 10.5px;
  font-weight: 800;
}

/* Badan kartu tumbuh mengisi sisa tinggi supaya baris harga SELALU rata di dasar,
   berapa pun panjang nama produknya. Tanpa ini, kartu bernama pendek menaruh
   harganya lebih tinggi daripada tetangganya dan barisnya terlihat berantakan. */
.fs-card-body { flex: 1; min-width: 0; }
.fs-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.fs-card-game {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-card-foot { display: block; margin-top: 9px; }
.fs-card-old { display: block; font-size: 11px; color: var(--muted); text-decoration: line-through; }
.fs-card-price { display: block; margin-top: 1px; font-size: 14.5px; color: var(--text); }

/* Kartu penutup "Lihat semua" — garis putus-putus, sama seperti kartu "Request game"
   di daftar game. Pola yang sudah dikenal pembaca: kotak putus-putus = bukan barang,
   tapi jalan ke tempat lain. */
.fs-card-more {
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--border-field);
  text-align: center;
}
.fs-card-more:hover { border-color: var(--muted); }
.fs-more-count { font-size: 19px; color: var(--danger); }
.fs-more-text { font-size: 12px; font-weight: 700; color: var(--text-2); }

/* ——— Halaman /flash-sale: semua promo sekaligus ———
   Grid, bukan rail: di sini tujuannya membandingkan, bukan mengintip. */
.fs-page { margin-top: 4px; }
.fs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Semua baris setinggi baris tertinggi. Tanpa ini, baris yang isinya bernama
     pendek jadi lebih ceper daripada baris di atasnya dan gridnya terlihat
     bergerigi — terukur 167px vs 184px. */
  grid-auto-rows: 1fr;
  gap: 10px;
}
/* Kartu di grid mengikuti kolom, bukan lebar tetap milik rail. */
.fs-grid .fs-card { flex: 1 1 auto; }
.fs-card-until { display: block; margin-top: 4px; font-size: 10.5px; }

/* Kelompok per game: judul yang menjawab "ini game apa" sebelum pembeli sempat
   bertanya. Nominal seperti "5 Diamond" ada di banyak game, dan ikon produknya
   sering sama persis — tanpa judul ini dua kartu identik berdiri bersebelahan. */
.fs-group + .fs-group { margin-top: 22px; }
.fs-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--divider);
}
.fs-group-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.fs-group-icon-empty {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.fs-group-name {
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hilang duluan di layar sempit — nama game yang harus bertahan, bukan hitungannya. */
.fs-group-meta { flex: 1; font-size: 11.5px; white-space: nowrap; }
.fs-group-link {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none !important;
}
.fs-group-link:hover { color: var(--text); }
@media (max-width: 519px) { .fs-group-meta { display: none; } .fs-group-name { flex: 1; } }


/* Penanda flash di panel: keterangan, bukan chip status. Chip hijau/merah di baris
   yang sama menentukan produknya bisa dibeli atau tidak — itu yang harus paling
   keras terbaca, bukan promonya. */
.products-flash-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
}
.orders-card-row .products-flash-note { display: inline; margin-top: 0; }

/* Konfirmasi batal order — dua langkah supaya tidak salah pencet */
.cancel-confirm[hidden] { display: none !important; }
.cancel-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--danger-border);
  border-radius: 13px;
  background: var(--danger-bg);
}
.cancel-confirm form { margin: 0; }
.cancel-warn { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.cancel-warn strong { color: var(--danger); }

/* `.btn` memakai display:inline-flex, yang menang atas UA style [hidden].
   Aturan ini menutup seluruh kelas bug itu untuk semua tombol sekaligus. */
.btn[hidden] { display: none !important; }

/* —— R3.4 Status result (selesai / diproses / kedaluwarsa / batal) —— */
.st-hero { text-align: center; padding: 26px 4px 0; }
.st-ico {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 14px; font-size: 26px; font-weight: 700;
}
.st-ico-ok { background: var(--ok-bg); }
.st-ico-proc { background: var(--proc-bg); }
/* ⚠️ Tanda silangnya DIGAMBAR (dua batang miring), bukan huruf `×`.
   Saudara-saudaranya (`.st-ico-ok`, `.st-ico-proc`) memakai `<img>` SVG; cuma
   keadaan "gagal" yang dulu memakai glyph — dan terukur **4px di bawah** titik
   tengah lingkaran 64px. Di lingkaran sebesar itu selisih segitu terlihat.

   `line-height: 1` yang tertulis di sini sebelumnya adalah percobaan menambalnya
   dengan alat yang salah: line-height menengahkan KOTAK BARIS, dan tinta `×`
   (12px) tidak duduk di tengah kotak itu. Perhatikan efek sampingnya — nilainya
   BERBEDA dari saudara-saudaranya (26px vs 37,7px), jadi tambalan itu juga membuat
   tiga keadaan yang seharusnya kembar jadi tidak kembar.

   Ukuran tintanya sengaja dipertahankan (bentang ~12px, tebal 2,5px): yang
   diperbaiki letaknya, bukan besarnya. Cara mengukurnya: `scripts/ukur-glyph-tengah.js`. */
.st-ico-bad {
  background: var(--danger-bg);
  color: var(--danger);
  position: relative;
  font-size: 0;
}
.st-ico-bad::before,
.st-ico-bad::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 17px; height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
.st-ico-bad::before { transform: translate(-50%, -50%) rotate(45deg); }
.st-ico-bad::after { transform: translate(-50%, -50%) rotate(-45deg); }
.st-title {
  margin: 0; font-size: 23px; font-weight: 800;
  letter-spacing: -.02em; color: var(--text);
}
.st-sub {
  margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5;
}
.st-oid-pill {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; border: 1px solid var(--border-field);
  border-radius: 999px; padding: 8px 8px 8px 15px;
  font-size: 14px;
}
.st-oid-copy {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 0; border-radius: 999px;
  padding: 6px 11px; font-size: 12px; font-weight: 700;
  color: var(--text-2); cursor: pointer; font-family: inherit;
}
.st-oid-copy:hover { color: var(--text); }

/* Kode voucher di halaman status — INI barangnya, jadi dia kotak tersendiri, bukan satu baris
   ringkasan. `break-all`: kode panjang tanpa spasi nol boleh mendorong kotak melewati 390px. */
.st-voucher {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--gold-border); border-radius: 14px;
  background: var(--gold-bg);
  max-width: 100%;
}
.st-voucher-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.st-voucher-kode { font-size: 19px; letter-spacing: .04em; word-break: break-all; text-align: center; }
.st-voucher-kosong {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--danger-border); background: var(--danger-bg); color: var(--danger);
  font-size: 13.5px;
}

.st-timeline {
  list-style: none; margin: 26px 0 0; padding: 0 2px;
}
.st-tl-item { display: flex; align-items: stretch; gap: 0; }
.st-tl-rail {
  display: flex; flex-direction: column; align-items: center;
  width: 26px; flex-shrink: 0;
}
.st-tl-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--border-field); margin-top: 5px; flex-shrink: 0;
}
.st-tl-line {
  flex: 1; width: 2px; min-height: 18px;
  background: var(--border); margin: 4px 0 0;
}
.st-tl-item.is-done .st-tl-dot { background: var(--ok); }
.st-tl-item.is-done .st-tl-line { background: #1F3D2A; }
.st-tl-item.is-current .st-tl-dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(254, 200, 50, .15);
}
.st-tl-item.is-final .st-tl-title { color: var(--ok); }
.st-tl-body { padding-bottom: 18px; min-width: 0; flex: 1; }
.st-tl-item:last-child .st-tl-body { padding-bottom: 0; }
.st-tl-title { font-size: 14.5px; font-weight: 700; color: var(--text); }
.st-tl-item:not(.is-done):not(.is-current) .st-tl-title { color: var(--muted); }
.st-tl-item.is-current .st-tl-title { color: var(--gold-text); }
.st-tl-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.st-summary {
  margin-top: 22px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); padding: 6px 15px;
}
.st-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 11px 0; font-size: 14px;
  border-bottom: 1px solid var(--divider);
}
.st-sum-row:last-child { border-bottom: 0; }
.st-sum-row span:first-child { color: var(--muted); flex-shrink: 0; }
.st-sum-row strong { font-weight: 600; text-align: right; }

.st-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px; margin-bottom: 8px;
}
.st-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* —— R3.5 Lacak —— */
.lacak-lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.lacak-form { margin-bottom: 8px; }
.lacak-oid {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  padding: 0 15px;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 12px;
}
.lacak-oid::placeholder { color: #5C5B57; }
.lacak-oid:focus {
  outline: none;
  border-color: var(--gold-text);
  box-shadow: 0 0 0 3px rgba(254, 200, 50, .12);
}
.lacak-recent { margin-top: 24px; }
.lacak-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lacak-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none !important;
  color: inherit;
}
.lacak-row:hover { border-color: var(--border-field); }
.lacak-row-body { flex: 1; min-width: 0; }
.lacak-row-oid {
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lacak-row-meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lacak-row .chip {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 6px;
}
.lacak-empty { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; }
.lacak-hint { margin: 16px 0 8px; font-size: 12.5px; line-height: 1.5; }
.link-gold {
  color: var(--gold-text);
  font-weight: 700;
  text-decoration: none;
}
.link-gold:hover { text-decoration: underline; }

/* —— R3.7 Bantuan —— */
.help-steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 8px;
}
.help-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
}
.help-step-n {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--gold-chip);
  color: var(--gold-text);
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.help-step-body { min-width: 0; flex: 1; }
.help-step-title { font-size: 14.5px; font-weight: 700; }
.help-step-sub { font-size: 12.5px; margin-top: 2px; line-height: 1.45; }

.help-faq-label { margin-top: 22px; }
.help-faq {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 0 15px;
  margin-bottom: 8px;
}
.help-faq-item {
  border-bottom: 1px solid var(--divider);
}
.help-faq-item:last-child { border-bottom: 0; }
.help-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.help-faq-q::-webkit-details-marker { display: none; }
.help-faq-q::after {
  content: "▾";
  color: var(--muted);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform .15s;
}
.help-faq-item[open] > .help-faq-q::after {
  transform: rotate(-180deg);
}
.help-faq-a {
  padding: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.help-faq-a strong { color: var(--text); font-weight: 700; }

.help-cta-card {
  margin-top: 20px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
}
.help-cta-title { font-size: 15px; font-weight: 700; }
.help-cta-body {
  margin: 6px 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.help-cta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.help-cta-soft { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.help-cta-links {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
}



/* —— Residual R0–R4: admin micro + light theme (CLAUDE) —— */
.admin-theme-btn{
  border:1px solid var(--border-field);background:var(--surface);color:var(--text-2);
  border-radius:10px;width:40px;height:40px;font-size:16px;cursor:pointer;flex-shrink:0;
}
.admin-theme-btn:hover{border-color:var(--gold-border);color:var(--gold-text)}
/* JANGAN deklarasikan .admin-topbar{display:flex} tanpa media query di sini.
   Base-nya display:none dan cuma jadi flex di <=768px; aturan tanpa syarat di blok
   ini menang atas base-nya, jadi topbar mobile ikut tampil di desktop dan memakan
   ~291px di kiri (sidebar + konten kedorong). */
.dash-kpi .n,.kpi .n{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums}
.orders-desk th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
@media (max-width:768px){
  .dash-actions{grid-template-columns:1fr}
  .dash-action,.orders-head-actions .btn,.queue-head .btn{min-height:44px}
  .admin-menu-btn,.admin-theme-btn{min-width:44px;min-height:44px}
}

:root[data-theme="light"]{
  --bg:#E9E5DC;
  --header-bg:rgba(233,229,220,.88);
  --bg-elevated:#F1EEE7;
  --surface:#F6F3EE;
  --surface-2:#F1EEE7;
  --surface-3:#E9E5DC;
  --border:#D6D0C4;
  --border-field:#CBC4B6;
  --divider:#E1DCD1;
  --border-soft:#D6D0C4;
  --text:#17150F;
  --text-2:#4A463E;
  /* Enam token teks digeser 2026-08-15 supaya lolos WCAG AA 4,5:1 di tema terang.
     Nilai lamanya dicatat di sini karena semuanya masih beredar di berkas desain
     `*.dc.html` (yang sengaja TIDAK ikut diubah — bundel desain itu arsip):
       --muted     #6E6A61 -> 4,29 di kertas
       --muted-2   #78736A -> 3,75 di kertas / 4,26 di kartu
       --gold-text #9A7509 -> 3,39 di kertas / 3,85 di kartu / 3,54 di chip emas
       --ok        #157F3C -> 4,24
       --danger    #C43B3B -> 4,18
     `--gold-text` yang paling mahal: dia warna `a{}` global dan dipakai 118 kali,
     jadi tiap tautan dan tiap harga di tema terang ikut di bawah ambang.
     Kontras dihitung ulang oleh `KontrasTokenTest` — jangan ubah nilai di sini
     tanpa menjalankannya. */
  --muted:#6A665E;
  --muted-2:#6B665E;
  --gold:#FEC832;
  --on-gold:#17140C;
  --gold-text:#816208;
  --gold-bg:#F7E9C4;
  --gold-chip:#F7E9C4;
  --gold-border:#E0AE1C;
  /* Sama dengan --gold-text, ditulis desimal. Kalau yang ini tertinggal, ring
     fokus memakai rona emas lama sementara teksnya sudah bergeser. */
  --gold-soft:rgba(129,98,8,.18);
  --gold-dim:#E0AE1C;
  --ok:#147638; --ok-bg:#DDEFE2;
  --danger:#BA3838; --danger-bg:#F6E2E0; --danger-border:#E0B4B0;
  --info:#1D4ED8;
  --proc-bg:#DFE5F0;
  --danger-row:rgba(246, 226, 224, .75);
  --stale-bg:#F7E9C4; --stale-border:#E0AE1C;
}
/* Override terang untuk `.products-status-chip` dan `.btn-danger-outline` DICABUT
   2026-08-06: aturan dasarnya sekarang memakai token, jadi override ini cuma
   menyalin nilai yang sama. Bahayanya bukan duplikasi — kalau suatu hari token
   `--danger` terang digeser, override yang tertinggal MENANG dan dua komponen ini
   diam-diam memakai warna lama. */
/* Override terang untuk `.products-status-chip` dan `.btn-danger-outline` DICABUT
   2026-08-06: aturan dasarnya sekarang memakai token, jadi override ini cuma menyalin
   nilai yang sama. Bahayanya bukan duplikasi — kalau suatu hari token `--danger` terang
   digeser, override yang tertinggal MENANG dan dua komponen itu diam-diam memakai warna
   lama. */
:root[data-theme="light"] .dash-pill.active{
  background:#17150F;color:#F6F3EE;border-color:#17150F;
}
:root[data-theme="light"] .admin-nav-ico,
:root[data-theme="light"] .orders-manual-ico,
:root[data-theme="light"] .kpi-ico{
  filter:invert(22%) sepia(8%) saturate(400%) brightness(95%);
}
:root[data-theme="light"] .admin-side a.active .admin-nav-ico{
  filter:invert(42%) sepia(70%) saturate(600%) hue-rotate(10deg) brightness(90%);
}
:root[data-theme="light"] .logs-row-err{background:rgba(246,226,224,.65)}
:root[data-theme="light"] .login-wrap{background:var(--bg)}
:root[data-theme="light"] .login-card{background:var(--surface);border-color:var(--border)}

/* ═══════════════════════════════════════════════════════════════
   Layar 11 — Harga (daftar harga per game)
   ═══════════════════════════════════════════════════════════════ */
.price-head-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.price-head-updated { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.price-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--border-field);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 14px;
}
.price-search img { flex-shrink: 0; opacity: .9; }
.price-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 14.5px;
  padding: 0;
}
.price-search input::placeholder { color: var(--muted-2); }
.price-search input:focus { outline: none; }
.price-search:focus-within { border-color: var(--gold-border); }

.price-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.price-pill {
  padding: 8px 14px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.price-pill.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 700;
}

.price-group { margin-bottom: 22px; }
.price-group[hidden] { display: none; }
.price-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.price-group-art { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.price-group-art-empty { background: var(--surface-2); border: 1px solid var(--border); }
.price-group-name { flex: 1; margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.price-group-count { font-size: 12.5px; color: var(--muted-2); }

.price-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 2px 15px;
}
.price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  min-height: 44px;
  color: var(--text);
  text-decoration: none !important;
}
/* Garis pemisah hanya di antara baris yang benar-benar tampil — baris yang
   disembunyikan (collapse / hasil pencarian) tidak meninggalkan garis gantung. */
.price-row:not([hidden]) ~ .price-row:not([hidden]) { border-top: 1px solid var(--divider); }
.price-row:hover { color: var(--text); }
.price-row:hover .price-row-price { color: var(--gold-text); }
.price-row[hidden] { display: none; }
.price-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.price-row-icon-empty {
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  color: var(--muted-2);
}
.price-row-body { flex: 1; min-width: 0; }
.price-row-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}
.price-row-badge {
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--gold-chip);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
}
.price-row-code { display: block; font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.price-row-price { font-size: 14px; color: var(--text); flex-shrink: 0; }

.price-more {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--gold-text);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.price-more[hidden] { display: none; }

.price-empty { text-align: center; padding: 24px 0; }
.price-empty[hidden] { display: none; }

.price-note {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 15px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   Layar 02 — kartu hero game di halaman Order
   ═══════════════════════════════════════════════════════════════ */
.ghero {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ghero-art { width: 84px; height: 84px; border-radius: 20px; object-fit: cover; }
.ghero-art-empty { background: var(--surface-2); border: 1px solid var(--border); }
.ghero-name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 13px 0 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ghero-check {
  width: 17px;
  height: 17px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ghero-publisher { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.ghero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 13px; }
.ghero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 600;
}
.ghero-badge-gold {
  background: var(--gold-chip);
  border-color: var(--gold-border);
  color: var(--gold-text);
  font-weight: 700;
}
.ghero-desc {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  text-align: left;
}
.ghero-desc[data-clamped="1"] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ghero-toggle {
  align-self: center;
  margin-top: 11px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--gold-text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   Layar 12 — Masuk (OTP WhatsApp / Telegram / Google)
   ═══════════════════════════════════════════════════════════════ */
.auth-screen { display: flex; flex-direction: column; min-height: 60vh; padding-top: 24px; }
.auth-intro { text-align: center; padding: 0 6px; }
.auth-logo { width: 60px; height: 60px; border-radius: 17px; object-fit: cover; }
.auth-title { margin: 16px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub {
  margin: 8px auto 0;
  max-width: 44ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.auth-options { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.auth-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  border-radius: 13px;
  font-family: var(--font);
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.auth-opt-gold {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--on-gold);
}
.auth-opt-line {
  background: var(--surface);
  border: 1px solid var(--border-field);
  color: var(--text);
}
.auth-opt-line:hover { border-color: var(--gold-border); color: var(--text); }
.auth-opt.is-off { opacity: .55; cursor: default; }
.auth-opt-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--text-2);
}
.auth-opt-mark-wa { background: rgba(23, 20, 12, .12); color: var(--on-gold); }
/* Logo brand (WhatsApp hijau, Telegram biru) warnanya hardcoded, jadi tidak
   boleh diberi filter ikon — difilter malah jadi bulatan abu. Yang diredupkan
   saat opsinya belum aktif cukup opacity-nya. */
.auth-opt-mark img { display: block; }
.auth-opt.is-off .auth-opt-mark img { opacity: .45; }
.auth-opt-body { flex: 1; min-width: 0; }
.auth-opt-name { display: block; font-size: 14.5px; font-weight: 700; }
.auth-opt-gold .auth-opt-name { font-weight: 800; }
.auth-opt-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.auth-opt-gold .auth-opt-hint { color: inherit; font-weight: 600; opacity: .72; }
.auth-opt-widget { flex-shrink: 0; display: flex; align-items: center; }

.auth-wa-field { margin-bottom: 10px; }
.auth-wa-field[hidden] { display: none; }
.auth-wa-field .group-label { display: block; margin-bottom: 8px; }
.auth-input {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}
.auth-input:focus { outline: none; border-color: var(--gold-text); }

.auth-or { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.auth-or span:not(.auth-or-text) { flex: 1; height: 1px; background: var(--divider); }
.auth-or-text { font-size: 12px; color: var(--muted-2); }

.auth-guest { margin-top: 18px; }
.auth-guest-btn {
  display: block;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  padding: 14px;
  min-height: 44px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none !important;
}
.auth-guest-btn:hover { border-color: var(--gold-border); color: var(--text-2); }
.auth-guest-note {
  margin: 9px 0 0;
  font-size: 12px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.5;
}
.auth-legal {
  margin: 24px 0 8px;
  padding: 0 6px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.6;
}
.auth-legal a { font-weight: 700; }

.auth-mock {
  margin-top: 18px;
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}
.auth-otp-form { margin-top: 24px; }
.auth-otp-form .group-label { display: block; margin-bottom: 8px; }
.auth-otp-input {
  width: 100%;
  height: 60px;
  padding: 0 15px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  font-size: 26px;
  letter-spacing: .32em;
  text-align: center;
}
.auth-otp-input:focus { outline: none; border-color: var(--gold-text); }
.auth-otp-submit { margin-top: 14px; }
.auth-otp-resend { margin-top: 16px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   Layar 13 — Profil
   ═══════════════════════════════════════════════════════════════ */
/* `.profile-theme-btn` DIHAPUS 2026-08-17 bersama tombolnya. Penukar tema kini
   hidup di header toko (`.header-tema`) dan berlaku di semua layar — di halaman
   Profil dua-duanya sempat tampil bersebelahan. Aturan CSS ini tidak dipakai
   siapa pun setelah tombolnya dicabut; ditinggal hidup dia cuma jadi undangan
   untuk memasang tombol keduanya lagi. */

.profile-card {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
}
.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gold-chip);
  color: var(--gold-text);
  font-size: 19px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.profile-avatar-img { object-fit: cover; }
.profile-card-body { flex: 1; min-width: 0; }
.profile-name { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.profile-contact { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ——— Kartu identitas: baris berlabel ———
   Menggantikan satu baris padat "+62 812-… · gabung 31 Jul" yang tidak pernah
   menampilkan username — padahal itu yang diketik customer waktu masuk. */
.ident-card {
  margin-top: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 4px 16px;
}
.ident-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.ident-row:last-child { border-bottom: 0; }
.ident-label { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.ident-value {
  font-size: 13.5px;
  color: var(--text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}
.ident-value-set { color: var(--gold-text); text-decoration: none; }
.ident-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  vertical-align: 1px;
}
.profile-verified {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.profile-stat {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 13px 14px;
}
.profile-stat-n { font-size: 21px; }
.profile-stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }

.profile-sec { margin-top: 22px; }
.profile-sec .group-label { display: block; margin-bottom: 10px; }
.profile-empty {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 15px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.profile-list, .profile-menu {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 0 15px;
}
.profile-pid {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  min-height: 44px;
}
.profile-pid + .profile-pid { border-top: 1px solid var(--divider); }
.profile-pid-art { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.profile-pid-art-empty { background: var(--surface-2); border: 1px solid var(--border); }
.profile-pid-body { flex: 1; min-width: 0; }
.profile-pid-game { display: block; font-size: 14px; font-weight: 700; }
.profile-pid-input {
  width: 100%;
  margin-top: 1px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
}
.profile-pid-input:read-only { cursor: default; }
.profile-pid.is-editing .profile-pid-input {
  color: var(--text);
  border-bottom: 1px solid var(--gold-border);
}
.profile-pid-input:focus { outline: none; }
.profile-pid-action {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.profile-pid-action:hover { color: var(--gold-text); }
.profile-pid-save { color: var(--gold-text); }
.profile-pid-save[hidden] { display: none; }

.profile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 0;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none !important;
}
.profile-menu-row + .profile-menu-row { border-top: 1px solid var(--divider); }
.profile-menu-row:hover { color: var(--gold-text); }
.profile-menu-meta { font-size: 13px; color: var(--muted-2); font-weight: 600; flex-shrink: 0; }

.profile-logout { margin: 18px 0 8px; }
.profile-logout-btn {
  width: 100%;
  border: 1px solid var(--danger-border);
  border-radius: 13px;
  padding: 14px;
  min-height: 44px;
  background: transparent;
  color: var(--danger);
  font-family: var(--font);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}
.profile-logout-btn:hover { background: var(--danger-bg); }


/* ═══════════════════════════════════════════════════════════════
   Layar 14–16 — Saldo DaengKoin
   ═══════════════════════════════════════════════════════════════ */
.wallet-head-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }

/* Kartu saldo di Profil */
.wallet-card {
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 16px;
  padding: 16px;
  margin-top: 12px;
}
.wallet-card-head { display: flex; align-items: center; gap: 8px; }
.wallet-card-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wallet-card-n { font-size: 28px; letter-spacing: -.02em; margin-top: 9px; }
.wallet-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.wallet-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.wallet-card-btn {
  border-radius: 12px;
  padding: 12px;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: 14px;
  text-decoration: none !important;
}
.wallet-card-btn-gold { background: var(--gold); color: var(--on-gold); font-weight: 800; }
.wallet-card-btn-gold:hover { color: var(--on-gold); }
.wallet-card-btn-line { border: 1px solid var(--gold-border); color: var(--gold-text); font-weight: 700; }

/* Kartu saldo kecil (layar Isi Saldo) */
.wallet-balance-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 14px;
  padding: 14px 15px;
}
.wallet-balance-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wallet-balance-now { font-size: 19px; margin-top: 2px; }

/* Hero saldo (layar Mutasi) */
.wallet-hero {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 14px;
  padding: 15px;
}
.wallet-hero-body { flex: 1; min-width: 0; }
.wallet-hero-n { font-size: 24px; letter-spacing: -.02em; margin-top: 3px; }
.wallet-hero-btn {
  background: var(--gold);
  color: var(--on-gold);
  border-radius: 11px;
  padding: 11px 16px;
  min-height: 44px;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 800;
  flex-shrink: 0;
  text-decoration: none !important;
}
.wallet-hero-btn:hover { color: var(--on-gold); }

.wallet-pills { display: flex; gap: 7px; margin: 16px 0 0; }
.wallet-pill {
  padding: 8px 14px;
  min-height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-field);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
}
.wallet-pill.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
}

.wallet-month { margin-top: 18px; }
.wallet-month .group-label { display: block; margin-bottom: 9px; }
.wallet-list {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 2px 15px;
}
.wallet-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; min-height: 44px; }
.wallet-row + .wallet-row { border-top: 1px solid var(--divider); }
.wallet-row-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.wallet-row-ico.is-in { background: var(--ok-bg); color: var(--ok); }
.wallet-row-ico.is-out { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.wallet-row-body { flex: 1; min-width: 0; }
.wallet-row-title { font-size: 14px; font-weight: 700; }
.wallet-row-meta { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.wallet-row-amount { font-size: 14px; color: var(--text); flex-shrink: 0; }
.wallet-row-amount.is-in { color: var(--ok); }

.wallet-more {
  display: block;
  text-align: center;
  padding: 14px 0 0;
  min-height: 44px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-text);
  text-decoration: none !important;
}

.wallet-note {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 14px;
  padding: 14px 15px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 20px;
}

/* Grid nominal isi saldo */
.topup-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.topup-nom {
  border: 1px solid var(--border-field);
  background: var(--surface);
  border-radius: 13px;
  padding: 13px 12px;
  min-height: 44px;
  text-align: center;
  font-family: var(--font);
  color: var(--text);
  cursor: pointer;
}
.topup-nom.selected { border: 1.5px solid var(--gold); background: var(--gold-bg); }
.topup-nom-n { display: block; font-size: 15px; }
.topup-nom-tag {
  display: block;
  min-height: 15px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
  margin-top: 3px;
}
.topup-nom.selected .topup-nom-tag { color: var(--gold-text); font-weight: 700; }

.topup-custom {
  height: 50px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  margin-top: 11px;
}
.topup-custom:focus-within { border-color: var(--gold-text); }
.topup-custom-rp { font-size: 14px; font-weight: 700; color: var(--muted); }
.topup-custom input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  padding: 0;
}
.topup-custom input::placeholder { color: var(--muted-2); }
.topup-custom input:focus { outline: none; }
.topup-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); }
.gold-text { color: var(--gold-text); }

/* Saldo sebagai pilihan bayar di halaman order */
.pay-opt-balance { border-color: var(--gold-border) !important; background: var(--gold-bg) !important; }
.pay-opt-icon-balance {
  background: var(--gold-chip);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.pay-opt-balance-tag {
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.pay-opt-balance-tag.is-short { background: var(--danger-bg); color: var(--danger); }

/* Layar 16 — konfirmasi bayar pakai saldo */
.bal-product {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 16px;
}
.bal-product-art { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.bal-product-art-empty { background: var(--surface-2); border: 1px solid var(--border); }
.bal-product-body { flex: 1; min-width: 0; }
.bal-product-name { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.bal-product-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.bal-summary {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 16px;
  padding: 4px 16px;
  margin-top: 16px;
}
.bal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--muted);
}
.bal-row + .bal-row { border-top: 1px solid var(--divider); }
.bal-row span:last-child { color: var(--text); }
.bal-row-total { padding: 14px 0 10px; }
.bal-total { font-size: 22px; letter-spacing: -.01em; }

.bal-after {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 14px;
  padding: 14px 15px;
  margin-top: 14px;
}
.bal-after-body { flex: 1; min-width: 0; }
.bal-after-title { font-size: 13.5px; font-weight: 700; }
.bal-after-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bal-after-n { font-size: 15px; color: var(--gold-text); flex-shrink: 0; }

.bal-short {
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
}
.bal-short-title { font-size: 14.5px; font-weight: 800; color: var(--danger); }
.bal-short-sub { margin: 6px 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.bal-pay-form { width: 100%; }
.sticky-bar-single { display: block; }

/* ═══════════════════════════════════════════════════════════════
   Layar 17 — Hubungkan bot Telegram
   ═══════════════════════════════════════════════════════════════ */
.tglink-intro { text-align: center; padding: 8px 4px 0; }
.tglink-title { margin: 14px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.tglink-sub {
  margin: 8px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.tglink-steps {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 2px 15px;
}
.tglink-step { display: flex; gap: 12px; padding: 13px 0; }
.tglink-step + .tglink-step { border-top: 1px solid var(--divider); }
.tglink-step-n {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tglink-step-title { font-size: 14px; font-weight: 700; }
.tglink-step-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

.tglink-code {
  height: 54px;
  border: 1px dashed var(--gold-border);
  background: var(--gold-bg);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
}
.tglink-code-text { flex: 1; min-width: 0; font-size: 16px; letter-spacing: .04em; }
.tglink-copy {
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tglink-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); }
.tglink-open { margin-top: 16px; }
.tglink-renew { margin-top: 12px; text-align: center; }

.tglink-connected {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 14px 15px;
}
.tglink-connected-body { flex: 1; min-width: 0; }
.tglink-connected-name { font-size: 14px; font-weight: 700; }
.tglink-connected-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tglink-disconnect {
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
}
.tglink-disconnect:hover { color: var(--danger); }

/* Kartu bot di halaman order */
.bot-card {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 13px;
  padding: 13px 14px;
}
.bot-card-body { flex: 1; min-width: 0; }
.bot-card-title { font-size: 14px; font-weight: 700; }
.bot-card-user { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.bot-card-tag {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Ajakan pasang aplikasi (PWA)
   Duduk DI ATAS bottom-nav / sticky-bar, memakai offset yang sama
   dengan `.cs-fab-wrap` supaya tiga elemen melayang itu tidak saling
   menutupi. `.pwa-bar` sibling dari `.shell`, jadi kelas shell yang
   menentukan tingginya.
   ═══════════════════════════════════════════════════════════════ */
.pwa-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  width:calc(100% - 24px);
  max-width:calc(var(--max) - 24px);
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border:1px solid var(--gold-border);
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:55;
}
.shell.has-sticky ~ .pwa-bar{
  bottom:calc(var(--sticky-h, 78px) + env(safe-area-inset-bottom, 0px) + 12px);
}
.pwa-bar[hidden]{display:none!important}
/* Tombol CS melayang di sudut yang sama dan menabrak tombol tutup bar.
   `--pwa-h` diisi JS dari tinggi bar yang sebenarnya — isinya beda antara
   Android (ada tombol Pasang) dan iOS (petunjuk dua baris). */
.dk-pwa-open .cs-fab-wrap{
  bottom:calc(56px + env(safe-area-inset-bottom, 0px) + 12px + var(--pwa-h, 80px) + 10px);
}
.dk-pwa-open .cs-fab-wrap.cs-fab-sticky{
  bottom:calc(var(--sticky-h, 78px) + env(safe-area-inset-bottom, 0px) + 12px + var(--pwa-h, 80px) + 10px);
}
.pwa-bar-ico{flex-shrink:0;border-radius:8px;width:30px;height:30px}
.pwa-bar-body{flex:1;min-width:0}
.pwa-bar-title{font-size:13.5px;font-weight:700;color:var(--text)}
/* Dua baris cukup. Tanpa batas ini teksnya terjepit di sisa lebar dan barnya
   tumbuh sampai 117px — diukur di 375px, menutupi kartu game di belakangnya. */
.pwa-bar-desc{
  font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pwa-bar-go{
  flex-shrink:0;
  min-height:38px;
  padding:9px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--gold-border);
  background:var(--gold-bg);
  color:var(--gold-text);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.pwa-bar-go[hidden]{display:none}
/* Silang digambar, bukan huruf `×` — alasan sama dengan `.st-ico-bad`.
   `line-height:1` yang tertulis di sini sebelumnya tidak menengahkan apa pun:
   tombolnya bahkan tidak punya flex/grid, jadi tandanya duduk di garis alas. */
.pwa-bar-x{
  flex-shrink:0;
  display:block;
  position:relative;
  width:30px;height:30px;
  border:0;background:transparent;
  /* `var(--dim)` — token itu TIDAK PERNAH ADA. Namanya `--muted-2` (komentarnya
     memang berbunyi "dim", dan itu yang menyesatkan). `var()` ke properti yang
     tidak terdefinisi jatuh ke nilai WARISAN, bukan ke galat: tombol tutupnya
     selama ini menyala seterang `--text`, bukan redup. Ditemukan 2026-08-17 waktu
     mengukur warna batang silangnya. */
  color:var(--muted-2);
  font-size:0;
  cursor:pointer;
}
.pwa-bar-x::before,
.pwa-bar-x::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:14px;height:2px;
  border-radius:2px;
  background:currentColor;
}
.pwa-bar-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.pwa-bar-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.pwa-bar-x:hover{color:var(--text-2)}
/* Layar sempit: tombol turun ke baris sendiri supaya judulnya tidak terpotong. */
@media (max-width:359px){
  .pwa-bar{flex-wrap:wrap}
  .pwa-bar-go{width:100%;order:3}
}

/* Ajakan hubungkan Telegram — tampil kalau bot BELUM nempel.
   Aksen emas lembut, bukan emas terisi: satu-satunya emas terisi di layar order
   adalah tombol Bayar. */
.tg-invite {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  border-radius: 13px;
  color: inherit;
}
.tg-invite:hover { border-color: var(--gold); }
.tg-invite img { flex-shrink: 0; }
.tg-invite-body { flex: 1; min-width: 0; }
.tg-invite-title { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.tg-invite-desc { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tg-invite-go {
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  font-size: 11.5px;
  font-weight: 700;
}
.tg-steps {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.tg-steps li { margin-top: 3px; }
.tg-steps strong { color: var(--text-2); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   Tombol kontak WhatsApp + Telegram (desain v3)
   Ikon WhatsApp warnanya hardcoded — jangan diberi filter.
   ═══════════════════════════════════════════════════════════════ */
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
/* Kalau admin cuma mengisi satu kanal, tombolnya melebar — bukan setengah baris
   dengan lubang di sebelahnya. */
.contact-pair-one { grid-template-columns: 1fr; }
.contact-note { margin: 9px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-field);
  border-radius: 13px;
  padding: 14px 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  text-decoration: none !important;
}
.contact-btn:hover { border-color: var(--gold-border); color: var(--text-2); }

.help-cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.help-cta-pair-one { grid-template-columns: 1fr; }
.help-cta-wa,
.help-cta-tg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  padding: 14px 10px;
  min-height: 44px;
  font-size: 14.5px;
  text-decoration: none !important;
}
.help-cta-wa { background: #25D366; color: #08331C; font-weight: 800; }
.help-cta-wa:hover { color: #08331C; }
.help-cta-tg {
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-text);
  font-weight: 700;
}
.help-cta-note { margin: 10px 0 0; font-size: 12px; color: var(--muted-2); text-align: center; }


/* ==== Admin Redesign · saldo pelanggan (import 2026-07-28) ==================== */

.dash-wallet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dash-wallet-head .dash-section-hint { margin-bottom: 0; }
.dash-wallet-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-text);
  text-decoration: none !important;
  white-space: nowrap;
}
.dash-wallet-link:hover { color: var(--gold-text); }

.dash-wallet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 10px 0 18px;
}
.dash-wallet-card {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 16px 18px;
  color: inherit;
  text-decoration: none !important;
  transition: border-color .15s, transform .12s;
}
.dash-wallet-card:hover { border-color: var(--gold); transform: translateY(-1px); color: inherit; }
.dash-wallet-held { border-color: var(--gold-border); background: var(--gold-bg); }
.dash-wallet-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dash-wallet-held .dash-wallet-label { color: var(--text-2); }
.dash-wallet-n { font-size: 22px; font-weight: 700; margin-top: 5px; color: var(--text); }
.dash-wallet-held .dash-wallet-n { color: var(--gold-text); }
.dash-wallet-sub { font-size: 12px; color: var(--muted-2); margin-top: 4px; }

/* ——— Saldo supplier (DF6) ———
   Kartunya <div>, bukan <a>: tidak ada layar internal yang bisa dituju — isi ulang
   saldo dikerjakan di panel Digiflazz, di luar aplikasi ini. */
.dash-supplier{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 8px}
.dash-supplier-card{
  border:1px solid var(--border);background:var(--surface);
  border-radius:14px;padding:16px 18px;
}
.dash-supplier-n{font-size:22px;font-weight:700;margin-top:5px;color:var(--text)}
.dash-supplier-msg{font-size:12.5px;line-height:1.5;margin-top:5px;color:var(--text-2)}
.dash-supplier-card.is-low{border-color:var(--danger-border);background:var(--danger-bg)}
.dash-supplier-card.is-low .dash-supplier-n,
.dash-supplier-card.is-low .dash-supplier-msg{color:var(--danger)}
.dash-supplier-card.is-low .dash-wallet-label{color:var(--danger)}
/* Basi ≠ salah. Kuning: angkanya mungkin benar, cuma tidak bisa dipercaya umurnya. */
.dash-supplier-card.is-stale{border-color:var(--stale-border);background:var(--stale-bg)}
.dash-supplier-card.is-stale .dash-wallet-label,
.dash-supplier-card.is-stale .dash-supplier-msg{color:var(--gold-text)}
.dash-supplier-card.is-error{border-color:var(--danger-border)}
.dash-supplier-card.is-error .dash-supplier-msg{color:var(--danger);font-size:11.5px;word-break:break-word}
.dash-supplier-note{margin:0 0 18px;font-size:12px}

@media (max-width:900px){
  .dash-supplier{grid-template-columns:1fr}
}

@media (max-width: 1100px) { .dash-wallet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-wallet { grid-template-columns: 1fr; } }

/* ==== Orders · kolom "Bayar / bot" =========================================== */

.pay-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-field);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pay-badge-saldo {
  background: var(--gold-chip);
  border-color: var(--gold-border);
  color: var(--gold-text);
}
.pay-badge-none { border-color: transparent; }

.orders-pay-cell { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.orders-pay-cell-inline { flex-direction: row; align-items: center; gap: 8px; }
.orders-pay-tg { font-size: 12.5px; }

/* ==== Admin · Saldo & mutasi ================================================= */

.wallet-sum {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.wallet-sum-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 16px 18px;
}
.wallet-sum-held { border-color: var(--gold-border); background: var(--gold-bg); }
.wallet-sum-card .n { font-size: 20px; font-weight: 700; margin-top: 5px; color: var(--text); }
.wallet-sum-held .n { color: var(--gold-text); }
.wallet-sum-sub { font-size: 12px; margin-top: 4px; }
.wallet-in { color: var(--ok); }
.wallet-out { color: var(--muted); }

@media (max-width: 900px) { .wallet-sum { grid-template-columns: 1fr; } }

/* ==== Admin · Pelanggan ====================================================== */

.cust-name { display: flex; align-items: center; gap: 10px; }
.cust-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--gold-chip);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 800;
}
.cust-id { display: block; font-size: 11.5px; }
.cust-phone { font-size: 13px; }
.cust-balance-on { color: var(--gold-text); font-weight: 700; }
.pay-badge-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.pay-badge-off { background: var(--danger-bg); border-color: transparent; color: var(--danger); }

/* Akun diblokir (2026-08-06) — kartu status + kotak kirim pesan bot di layar detail. */
.cust-block-reason {
  margin: 0 0 11px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--text);
  font-size: 13.5px;
}
.cust-block-meta { margin: 0 0 12px; font-size: 12.5px; }
.cust-send-area { width: 100%; margin: 0 0 10px; min-height: 92px; resize: vertical; }

/* ==== Fidelity pass Admin Redesign (2026-07-29) ============================== */

.dash-pill .pill-n{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:var(--surface-3);color:var(--muted);
}
.dash-pill.active .pill-n{background:rgba(23,20,12,.18);color:inherit}
.orders-shown{margin:12px 0 0;padding:0 4px;font-size:12.5px}

/* ==== Admin · penyesuaian saldo manual ====================================== */

.adj-split{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:16px;align-items:start}
.adj-form{display:flex;flex-direction:column;gap:16px}
.adj-intro{margin:0;font-size:13px;line-height:1.55}
.adj-field{display:flex;flex-direction:column;gap:6px;margin:0;border:0;padding:0}
.adj-label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.adj-req{color:var(--danger)}
.adj-hint{font-size:12px;color:var(--muted-2)}
.adj-dir{display:flex;flex-direction:row;flex-wrap:wrap;gap:9px}
.adj-dir .adj-label{width:100%}
.adj-radio{display:flex;align-items:center;gap:8px;border:1px solid var(--border-field);border-radius:11px;padding:11px 14px;font-size:13.5px;font-weight:700;cursor:pointer;min-height:44px}
.adj-radio input{accent-color:var(--gold);width:16px;height:16px}
.adj-radio:has(input:checked){border-color:var(--gold-border);background:var(--gold-bg)}
.adj-radio-in{color:var(--ok)}
.adj-radio-out{color:var(--danger)}
.adj-reason{min-height:88px;resize:vertical;font-family:inherit;line-height:1.5}
.adj-actions{display:flex;gap:10px;flex-wrap:wrap}
.adj-actions .btn{min-height:44px}
.adj-note{margin:0;font-size:12px;line-height:1.5}
.adj-stats{grid-template-columns:repeat(3,1fr)}

@media (max-width:1100px){
  /* ⚠️ `minmax(0,1fr)`, BUKAN `1fr`. `1fr` = `minmax(auto,1fr)`, dan `auto` di sini
     berarti **min-content** — jadi kolomnya menolak menyusut di bawah isi terlebar
     di dalamnya. Yang terlebar `<select>` pelanggan ("nama · +62 … · Rp …", ~453px),
     akibatnya di 390px SELURUH HALAMAN jadi 501px dan bisa digeser ke samping.
     Aturan desktop di atas sudah pakai minmax(0,…); override ini yang kelewat. */
  .adj-split{grid-template-columns:minmax(0,1fr)}
  .adj-stats{grid-template-columns:1fr}
}
/* Kontrol form tidak boleh memaksa lebar induknya. `<select>` bawaannya selebar
   opsi terpanjang, dan daftar pelanggan isinya nama + nomor + saldo. */
.adj-form .orders-control{min-width:0;max-width:100%}

/* ==== Tabel jadi kartu di HP (`.data-stack`) ================================
 *
 * Mandat desain admin mobile: "tabel jadi kartu … tanpa scroll horizontal".
 * Sebelum ini layar grup Pelanggan masih tabel di dalam kotak `overflow-x:auto`:
 * Pelanggan 718px dan Saldo & mutasi **816px** dijejalkan ke kotak 360px, jadi
 * separuh kolomnya cuma bisa dilihat dengan menggeser ke samping.
 *
 * ## Kenapa BUKAN pola `.orders-card`
 *
 * Orders memakai dua DOM: tabel untuk desktop + `<article>` ringkasan untuk HP.
 * Itu cocok di sana — kartunya sengaja meringkas. Di sini tidak bisa: ini buku
 * besar uang dan daftar akun; kolom yang dibuang berarti angka yang hilang dari
 * pandangan admin. Dua DOM juga berarti dua tempat yang harus diubah tiap kolom
 * berubah, dan yang satu pasti ketinggalan suatu hari.
 *
 * Jadi satu DOM, CSS yang mengubah bentuknya. Judul kolomnya pindah ke
 * `td::before` lewat `data-label` — karena itu **tiap `<td>` wajib punya
 * `data-label`**, kalau tidak barisnya jadi deretan nilai tanpa keterangan.
 */
@media (max-width:768px){
  .data-stack thead{display:none}
  .data-stack,
  .data-stack tbody,
  .data-stack tr,
  .data-stack td{display:block;width:auto}
  /* Flex column supaya `.is-title` bisa dinaikkan ke atas pakai `order` — urutan
     DOM tetap urutan kolom desktop, jadi tidak ada tampilan kedua yang harus
     dijaga tetap sinkron. */
  .data-stack tr{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:14px;
    padding:14px;
    margin:0 0 10px;
    background:var(--surface);
  }
  .data-stack tr:hover td{background:transparent}
  .data-stack td{
    border:0;
    padding:6px 0;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    text-align:right;
  }
  /* ⚠️ `--muted`, bukan `--muted-2` yang dipakai label kelompok di tempat lain.
     Di desktop judul kolom cuma pengantar; di sini dia SATU-SATUNYA yang memberi
     tahu angka mana itu apa. `--muted-2` cuma 3,94 kontras di tema gelap — di
     bawah WCAG AA. `--muted` 5,37 (gelap) / 4,87 (terang), dua-duanya lolos, dan
     tetap token desain yang sudah ada — bukan warna karangan. */
  .data-stack td::before{
    content:attr(data-label);
    flex:0 0 auto;
    text-align:left;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  /* Judul kartu ditunjuk EKSPLISIT lewat `.is-title`, bukan `:first-child`.
     Di buku besar saldo kolom pertama itu `Waktu`, dan "05/08 14:32" sebagai judul
     kartu tidak memberi tahu apa-apa — yang dicari mata duluan nama pelanggannya.
     Menukar urutan kolom demi itu berarti mengubah tampilan desktop juga; menunjuk
     selnya jauh lebih murah. */
  .data-stack td.is-title{
    order:-1;
    display:block;
    text-align:left;
    padding:0 0 10px;
    margin:0 0 6px;
    border-bottom:1px solid var(--divider);
  }
  .data-stack td.is-title::before{display:none}
  /* Baris kosong (`colspan`) bukan data — jangan dikasih label atau dibelah. */
  .data-stack td.admin-empty-cell{display:block;text-align:center;border:0;padding:18px 0}
  .data-stack td.admin-empty-cell::before{display:none}
  /* Tombol aksi ikut aturan tap 44px. */
  .data-stack td.orders-row-actions{justify-content:flex-start}
  .data-stack td.orders-row-actions .btn{flex:1;justify-content:center;min-height:44px}
  /* Kotak pembungkusnya tidak perlu menggeser lagi — tidak ada yang melebar. */
  .data-stack-wrap{overflow-x:visible!important;padding:12px!important;background:transparent;border:0}
}
.cust-kpi{grid-template-columns:repeat(4,1fr)}
.cust-kpi-sub{font-size:12px;color:var(--muted-2);margin-top:4px}
.cust-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cust-toolbar .orders-pills{margin:0}
.cust-sort{display:flex;align-items:center;gap:10px;font-size:12.5px;flex-wrap:wrap}
.cust-sort-link{color:var(--muted);font-weight:600;text-decoration:none}
.cust-sort-link:hover{color:var(--text-2)}
.cust-sort-link.is-on{color:var(--gold-text);font-weight:700}
@media (max-width:1100px){.cust-kpi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cust-kpi{grid-template-columns:1fr}}
.adj-preview{border:1px solid var(--gold-border);background:var(--gold-bg);border-radius:13px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.adj-preview[hidden]{display:none!important}
.adj-preview-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.adj-preview-cell{display:flex;flex-direction:column;gap:2px}
.adj-preview-cap{font-size:11.5px;color:var(--muted)}
.adj-preview-cell strong{font-size:17px;color:var(--text)}
.adj-preview-arrow{color:var(--gold-text);font-size:17px;font-weight:800}
.adj-preview-warn{margin:0;font-size:12.5px;font-weight:700;color:var(--danger)}
.adj-preview-warn[hidden]{display:none!important}
/* Ikon brand (Telegram/WhatsApp) warnanya hardcoded — filter bikin jadi bulatan abu. */
.kpi-ico-brand,:root[data-theme="light"] .kpi-ico-brand{filter:none}
/* ==== Admin · detail pelanggan ============================================== */

.cust-hero{display:flex;align-items:center;gap:14px}
.cust-hero-avatar{
  width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;
  background:var(--gold-chip);border:1px solid var(--gold-border);color:var(--gold-text);
  font-size:19px;font-weight:800;
}
.cust-hero-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cust-hero-id{font-size:12.5px;color:var(--muted-2);font-weight:600}
.cust-hero-meta{margin-top:5px;font-size:12.5px}

.cust-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.cust-main,.cust-side{display:flex;flex-direction:column;gap:0;min-width:0}
.cust-side{gap:14px}

.cust-pid{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--divider)}
.cust-pid:last-child{border-bottom:0;padding-bottom:0}
.cust-pid:first-child{padding-top:0}
.cust-pid-id{font-size:13.5px;font-weight:700;color:var(--text)}
.cust-pid-n{font-size:12.5px;flex-shrink:0}

.cust-balance-card{border-color:var(--gold-border);background:var(--gold-bg)}
.cust-balance-n{font-size:28px;font-weight:700;color:var(--gold-text);margin-top:6px}
.cust-balance-break{margin:6px 0 0;font-size:12px;line-height:1.5}
.cust-balance-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.cust-balance-actions .btn{min-height:40px}

.cust-mut{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--divider)}
.cust-mut:last-child{border-bottom:0;padding-bottom:0}
.cust-mut-ico{
  width:26px;height:26px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:13px;background:var(--surface-3);color:var(--muted);
}
.cust-mut-ico.is-in{background:var(--ok-bg);color:var(--ok)}
.cust-mut-body{flex:1;min-width:0}
.cust-mut-title{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cust-mut-meta{font-size:11.5px;margin-top:2px}
.cust-mut-amount{font-size:13px;font-weight:700;flex-shrink:0}

.cust-bot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cust-bot-handle{font-size:14px;font-weight:700;color:var(--gold-text)}
.cust-bot-meta{margin:8px 0 0;font-size:12.5px}
.cust-bot-note{margin:8px 0 0;font-size:12px;line-height:1.5}

@media (max-width:1100px){ .cust-split{grid-template-columns:1fr} }
/* ==== Settings · kartu Aturan saldo ========================================= */

.wr-card{display:flex;flex-direction:column;gap:15px;border-color:var(--gold-border);background:var(--gold-bg);max-width:520px}
.wr-head{display:flex;align-items:center;gap:9px}
.wr-ico{filter:invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%)}
:root[data-theme="light"] .wr-ico{filter:invert(58%) sepia(85%) saturate(520%) hue-rotate(357deg) brightness(92%)}
.wr-title{font-size:16.5px;font-weight:700}
.wr-field{display:flex;flex-direction:column;gap:6px}
.wr-field label,.wr-label{font-size:12.5px;color:var(--muted);font-weight:600}
.wr-hint{font-size:12px;color:var(--muted-2);line-height:1.5}
.wr-intro{margin:0;font-size:12.5px;line-height:1.55}
/* Kartu Kontak admin ikut tata letak .wr-card tapi bukan kartu emas — satu layar
   cukup satu panel emas biar penekanannya tidak hilang. */
.contact-card{border-color:var(--border);background:var(--surface)}
.wr-readonly{display:flex;align-items:center;color:var(--text-2)}
.wr-toggle,.wr-locked{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--border-field);border-radius:12px;background:var(--surface);padding:13px 15px;
}
.wr-toggle{cursor:pointer}
.wr-toggle input{width:20px;height:20px;accent-color:var(--gold);flex-shrink:0}
.wr-toggle-title{display:block;font-size:14px;font-weight:700}
.wr-toggle-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
/* ===== Order detail — Admin Redesign 3, layar 10 ===== */
.odet-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:12px;align-items:start}
.odet-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.odet-rail{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}
.odet-card{padding:18px 20px}
.odet-section-title{margin:0 0 12px;font-size:16px;font-weight:800}

.odet-product{display:flex;gap:12px;align-items:center;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--divider)}
.odet-product-art{flex-shrink:0;width:26px;height:26px;
  filter:invert(78%) sepia(6%) saturate(180%) brightness(103%)}
.odet-product-name{font-size:16.5px;font-weight:800;line-height:1.3}
.odet-product-meta{font-size:12px;color:var(--muted);margin-top:3px}

.odet-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.odet-kv>div{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border-soft);min-height:44px}
.odet-kv dt{color:var(--muted);font-size:13.5px;flex-shrink:0}
.odet-kv dd{margin:0;text-align:right;font-weight:600;font-size:13.5px;min-width:0;word-break:break-word}
.odet-total{color:var(--gold-text)}
.odet-tag-saldo{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--gold-chip);
  color:var(--gold-text);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em}
.odet-move-out{color:var(--danger)}
.odet-move-in{color:var(--ok)}
.odet-target{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}

.odet-note{margin:14px 0 0;padding:10px 12px;border-left:2px solid var(--gold-border);
  background:var(--surface-3);border-radius:0 10px 10px 0;font-size:13.5px;color:var(--text-2);
  line-height:1.55;white-space:pre-wrap}
.odet-note-sm{margin-top:6px;font-size:12.5px}
.odet-audit-actor{font-size:12px;margin-top:2px}

.odet-quick{padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  border-color:var(--gold-border);background:var(--gold-bg)}
.odet-quick-title{margin:0;font-size:15.5px;font-weight:800;color:var(--gold-text)}
.odet-quick-cta{width:100%;min-height:46px;font-size:14.5px}
.odet-quick-danger{width:100%;min-height:46px;border:1px solid var(--danger-border);
  background:var(--danger-bg);color:var(--danger);font-weight:700}
.odet-quick-danger:hover{border-color:var(--danger);color:var(--danger)}
.odet-quick-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.5}

.odet-status{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.odet-status label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-2)}
.odet-status textarea{min-height:96px;resize:vertical}
.odet-status-save{width:100%;min-height:44px}

.odet-mock{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.odet-mock-env{margin:0;font-size:12px;color:var(--muted)}
.odet-mock-cta{width:100%;min-height:44px}

@media (max-width:1080px){
  .odet-layout{grid-template-columns:1fr}
  .odet-rail{position:static}
}
@media (max-width:640px){
  .odet-kv{grid-template-columns:1fr;gap:0}
}

/* ===== Bulk harga — Admin Redesign 3, layar 11 ===== */
.bulk-layout{display:grid;grid-template-columns:400px minmax(0,1fr);gap:12px;align-items:start}
.bulk-param{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.bulk-param-title{margin:0;font-size:16px;font-weight:800}
.bulk-param>div>label,.bulk-label{display:block;margin-bottom:6px;font-size:13px;color:var(--text-2)}
.bulk-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.5}

.bulk-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bulk-seg-input{position:absolute;opacity:0;width:0;height:0}
.bulk-seg label{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;
  border:1px solid var(--border-field);border-radius:11px;background:var(--surface-3);
  color:var(--text-2);font-size:13.5px;font-weight:600;cursor:pointer;text-align:center}
.bulk-seg-input:checked+label{background:var(--text);border-color:var(--text);color:var(--surface);font-weight:700}
.bulk-seg-input:focus-visible+label{outline:2px solid var(--gold-text);outline-offset:2px}

.bulk-value{position:relative}
.bulk-value input{padding-right:74px}
.bulk-value-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:12.5px;color:var(--muted);pointer-events:none}
.bulk-preview-cta{width:100%;min-height:46px;font-size:14.5px}

.bulk-result{display:flex;flex-direction:column;gap:12px;min-width:0}
.bulk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bulk-kpi{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.bulk-kpi-gold{border-color:var(--gold-border);background:var(--gold-bg)}
.bulk-kpi-label{font-size:12.5px;color:var(--muted)}
.bulk-kpi-num{font-size:26px;font-weight:700;line-height:1}
.bulk-kpi-gold .bulk-kpi-num{color:var(--gold-text)}
.bulk-kpi-range{font-size:13px;font-weight:700}
.bulk-kpi-new{color:var(--ok);font-weight:500}

.bulk-sample{padding:0}
.bulk-sample-title{margin:0;padding:15px 18px;font-size:15.5px;font-weight:800;border-bottom:1px solid var(--divider)}
.bulk-table td{vertical-align:middle}
.bulk-td-new{color:var(--ok);font-weight:700}
.bulk-chip{display:inline-block;padding:3px 8px;border-radius:6px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:700;letter-spacing:.06em}
.bulk-chip-on{background:var(--ok-bg);color:var(--ok)}
.bulk-chip-off{background:var(--surface-3);color:var(--muted)}

.bulk-confirm{padding:16px 18px;display:flex;align-items:center;gap:16px;
  border-color:var(--gold-border);background:var(--gold-bg);flex-wrap:wrap}
.bulk-confirm-text{flex:1;min-width:240px;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.bulk-apply-cta{min-height:46px;padding:0 22px;flex-shrink:0}

@media (max-width:1080px){
  .bulk-layout{grid-template-columns:1fr}
  .bulk-kpis{grid-template-columns:1fr}
}

/* Header detail order: back di baris sendiri, OID+chip kiri, tombol kanan. */
.odet-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px}
.odet-head-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.orders-show-head .orders-show-title{margin:0}
.orders-show-head .orders-show-toolbar{margin-top:0}

/* ===== Brand / logo — Admin Redesign 4, layar 14 ===== */
.brand-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.brand-card-title{margin:0;font-size:16.5px;font-weight:800}
.brand-current,.brand-upload{padding:20px 22px;display:flex;flex-direction:column;gap:18px}

.brand-current-top{display:flex;align-items:center;gap:20px}
.brand-current-art{width:96px;height:96px;flex-shrink:0;object-fit:contain;padding:10px;
  border-radius:18px;background:var(--surface-2);border:1px solid var(--border-field)}
.brand-current-info{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.brand-path{font-size:12.5px;color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--border-field);border-radius:9px;padding:9px 11px;word-break:break-all}
.brand-meta{font-size:12.5px;color:var(--muted)}

.brand-uses{display:flex;flex-direction:column;gap:10px}
.brand-use{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--border-field);border-radius:12px;background:var(--surface-2);padding:12px 14px}
.brand-use-left{display:flex;align-items:center;gap:9px;min-width:0}
.brand-use-art{width:20px;height:20px;border-radius:5px;object-fit:cover;flex-shrink:0}
.brand-use-art-lg{width:26px;height:26px;border-radius:7px}
.brand-use-name{font-weight:800;font-size:15px}
.brand-use-title{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-use-tag{font-size:11.5px;color:var(--muted);font-weight:600;flex-shrink:0}

.brand-save{min-height:46px}
.brand-note{margin:0;padding:12px 14px;border-radius:11px;background:var(--surface-2);
  border-left:3px solid var(--gold-border);font-size:12.5px;color:var(--text-2);line-height:1.55}

@media (max-width:900px){.brand-layout{grid-template-columns:1fr}}

/* ===== Login admin — Admin Redesign 4, layar 17 ===== */
.login-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.login-brand{display:block;line-height:0}
.login-brand img{width:46px;height:46px;border-radius:12px;object-fit:cover}
.login-name{font-weight:800;font-size:19px;letter-spacing:-.01em}
.login-sub{font-size:13px;color:var(--muted)}

.login-form{display:flex;flex-direction:column;gap:16px}
.login-form label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.login-form .orders-control{width:100%;min-height:48px}

.login-pass{position:relative}
.login-pass .orders-control{padding-right:62px}
.login-pass-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-height:36px;padding:0 9px;border:0;border-radius:8px;background:transparent;
  color:var(--gold-text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.login-pass-toggle:hover{background:var(--gold-bg)}
.login-pass-toggle:focus-visible{outline:2px solid var(--gold-text);outline-offset:1px}

.login-cta{width:100%;min-height:50px;font-size:15px}
.login-note{margin:14px 0 0;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.5}
.login-back{margin:12px 0 0;text-align:center;font-size:12.5px}

/* ===== Admin di HP — Admin Mobile.dc.html / Admin Mobile Light.dc.html ===== */
/* CLAUDE.md: minimum tap 44px di mobile. Sebelumnya aturan ini ditempel per
   komponen (queue, orders, banners, tabs, products), jadi layar yang dibuat
   belakangan terlewat dan tombolnya masih 35–37px. Satu aturan menyeluruh. */
@media (max-width:768px){
  .admin-main .btn,
  .admin-main select,
  .admin-main textarea,
  .admin-main input:not([type="checkbox"]):not([type="radio"]){min-height:44px}
  .admin-main button:not(.admin-menu-btn):not(.admin-side-close):not(.admin-theme-btn):not(.banners-switch){
    min-height:44px
  }
  .admin-main .btn{display:inline-flex;align-items:center;justify-content:center}
  /* Kotak centang tidak dibuat 44px — baris tabel jadi rusak. Diperbesar
     secukupnya; hit-area sebenarnya ikut <label> pembungkusnya. */
  .admin-main input[type="checkbox"],
  .admin-main input[type="radio"]{width:22px;height:22px}
}

/* URL panjang di Settings sempat mendorong halaman melebar ~2px di 375px. */
.admin-main code{overflow-wrap:anywhere}





/* ==== Admin · pilihan cara refund waktu membatalkan order berbayar ========== */
.refund-box{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid var(--danger-border);background:var(--danger-bg);
  border-radius:14px;padding:14px;
}
.refund-box-head{font-size:13.5px;line-height:1.5;color:var(--text)}
.refund-box-note{font-size:12.5px;line-height:1.45;color:var(--muted)}
.refund-opt{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.refund-opt input{margin-top:3px;flex-shrink:0}
.refund-opt-name{display:block;font-size:14px;font-weight:700;color:var(--text)}
.refund-opt-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.refund-opt input:disabled + span .refund-opt-name{color:var(--muted)}
.refund-dest{display:flex;flex-direction:column;gap:6px}
.refund-dest label{font-size:12.5px;color:var(--muted);font-weight:600}

/* ——— Masuk pakai Telegram lewat bot (layar tunggu + cadangan widget) ——— */
.auth-alt{margin-top:2px;border:1px solid var(--border-field);border-radius:12px;background:var(--surface)}
.auth-alt-summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;color:var(--text-2)}
.auth-alt-summary::-webkit-details-marker{display:none}
.auth-alt-summary::after{content:'▾';float:right;color:var(--muted)}
.auth-alt[open] .auth-alt-summary::after{content:'▴'}
.auth-alt-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.auth-alt-hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}

.tgwait-box{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.tgwait-state{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--text)}
/* Titik berdenyut = satu-satunya tanda halaman ini masih hidup. Tanpa gerakan,
   layar tunggu terbaca sebagai layar macet. */
.tgwait-dot{flex-shrink:0;width:9px;height:9px;border-radius:999px;background:var(--gold);animation:tgwait-pulse 1.2s ease-in-out infinite}
.tgwait-timer{font-size:12.5px;color:var(--muted)}
.tgwait-box.is-ok .tgwait-dot{background:var(--ok);animation:none}
.tgwait-box.is-off .tgwait-dot{background:var(--muted);animation:none}
.tgwait-box.is-off .tgwait-state{color:var(--muted)}
@keyframes tgwait-pulse{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.tgwait-dot{animation:none}}

/* ——— Editor teks notifikasi Telegram (admin) ——— */
.tgtpl-vars{display:flex;flex-wrap:wrap;gap:6px 14px;margin:2px 0 14px}
.tgtpl-var{font-size:12px;color:var(--muted)}
.tgtpl-var .mono{color:var(--gold-text,var(--gold));font-weight:700;margin-right:4px}
/* Teks notifikasi itu multi-baris dan spasinya bermakna — monospace supaya
   admin melihat persis bentuk yang diterima customer. */
.tgtpl-area{width:100%;min-height:120px;line-height:1.55;resize:vertical;white-space:pre-wrap}

/* Kartu ber-field SETARA melebar dan isiannya berdampingan — bukan menumpuk
   berdampingan — bukan menumpuk (2026-08-19, lanjutan laporan "banyak kosong di kanan").

   Opt-in per kartu (`wr-card-flow`), BUKAN blanket. Yang layak: kartu yang isinya field
   SETARA tanpa urutan wajib — teks notifikasi (4 isian), Kontak admin (2), Aturan saldo (3),
   OTP WhatsApp (4), Bot Telegram (3). Yang TIDAK: kartu Keamanan (ganti sandi) — tiga isian
   sandi yang harus dibaca berurutan (lama -> baru -> ulangi), dan menyandingkan "baru"
   dengan "ulangi" itu anti-pola yang sudah dikenal. Nol kartu berisi TABEL yang ikut.

   Ukuran isian nol berubah: kartu jadi ~1064px dan kolomnya ~500px, sama dengan lebar
   isian sebelumnya (486px). Yang berubah cuma penempatannya.

   Terukur di 1900px: 520x1479 -> 1052x902 (2x2), dan sesudah tingginya dibetulkan
   (di bawah) 1052x1191 — tetap lebih pendek dari 1479, tapi nol isi tersembunyi.

   ⚠️ Pola "bawaan membentang penuh, yang dikecualikan mengalir" sama dengan
   `.settings-panel` — dan alasannya sama: mengubah kartu jadi grid membuat SEMUA anaknya
   item grid, termasuk intro, daftar isian, catatan, dan baris tombol. */
.settings-panel > .wr-card-flow{
  grid-column:1 / -1;
  max-width:1064px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap:15px;
  align-items:start;
}
.wr-card-flow > *{grid-column:1 / -1; min-width:0}
.wr-card-flow > .wr-field{grid-column:auto}

/* ⚠️ Tinggi isian: TIGA dari empat teks bawaan memotong isinya sendiri di `rows="6"`
   (butuh 213/213/307px, dapat 165) — admin menggulir di dalam kotak untuk membaca pesan
   yang sedang dia edit. Cacat itu sudah ada sejak kartunya lahir, dan baru terlihat waktu
   `scrollHeight` diadu dengan `clientHeight`; tampilannya sendiri nol memberi tanda.

   ⚠️ Cuma di >=1024px, dan itu hasil pengukuran bukan kompromi malas: di 375px isiannya
   selebar 347px (~37 karakter), teksnya membungkus jauh lebih banyak, dan bahkan 312px
   masih memotong satu dari empat. Memaksakannya di HP menambah 579px tinggi TANPA
   menyelesaikan masalahnya. Di layar sempit tampilannya sengaja dibiarkan seperti
   sekarang. */
@media (min-width:1024px){
  .tgtpl-card .tgtpl-area{min-height:312px}
}

/* Kartu di layar Pengaturan akun tidak dilipat (bukan <details>) — halaman ini
   memang cuma berisi itu, jadi menyembunyikannya cuma menambah satu ketukan. */
.profile-password.is-open .profile-password-head{cursor:default;list-style:none}
.profile-settings{display:flex;flex-direction:column;gap:12px}

/* ==== Beranda: batas 12 game + blok Tentang (2026-08-17) ==================== */

/* ⚠️ Kartu ke-13 dst disembunyikan lewat KELAS di wadahnya, bukan atribut `hidden`
   per kartu. Alasannya pencarian game yang sudah ada: dia menulis `hidden` tiap
   ketikan, dan MENGHAPUS pencarian menyetel `hidden = false` untuk SEMUA kartu —
   batas 12 akan lenyap diam-diam dan tidak pernah kembali. Dua mekanisme yang
   menulis atribut yang sama akan selalu saling menimpa; yang satu harus pakai
   saluran lain. */
/* Disebut per elemen (`.game-card` / `.home-game-section`), bukan `.is-sisa` telanjang.
   Dua alasan, dan yang kedua yang menemukan sendiri:
   1. Lebih tepat sasaran — cuma kartu game dan bagian game yang boleh disembunyikan,
      bukan apa pun yang kebetulan kebagian kelas itu nanti.
   2. `StateClassTest` menuntut aturan yang MEMASANGKAN kelas state dengan kelas yang
      benar-benar tertulis di markup layarnya. `is-sisa` cuma lahir dari ekspresi Blade
      (`{{ … ? 'is-sisa' : '' }}`), jadi tidak pernah terlihat sebagai "kelas dipakai".
      ⚠️ Dan `is-terbatas` sendiri lolos dari tes itu berbulan-bulan karena JS-nya memakai
      `classList.remove` — regexnya cuma menangkap `toggle|add`. Baru ketahuan waktu
      tombolnya dijadikan dua arah 2026-08-17. */
[data-games].is-terbatas .game-card.is-sisa,
[data-games].is-terbatas .home-game-section.is-sisa { display: none; }

/* Jaraknya 12px ke atas, 22px ke bawah — BUKAN 2px seperti versi pertama.
   Diukur 2026-08-17 atas keluhan user: ritme antar blok di halaman ini 20-22px,
   sementara tombol ini cuma 2px dari grid. Lebih rapat daripada gap ANTAR KARTU
   (10px), jadi dia terbaca menempel ke grid, bukan berdiri sebagai aksi sendiri.
   Tetap lebih dekat ke atas daripada ke bawah dengan sengaja: dia milik daftar di
   atasnya, dan kedekatan itu yang memberitahunya tanpa perlu label. */
.games-more { display: flex; justify-content: center; margin: 12px 0 22px; }

/* Tombol GARIS, bukan emas terisi. Beranda memang tidak punya aksi utama — yang
   dicari pengunjung adalah kartu gamenya, dan memberi tombol emas ke "muat lebih
   banyak" berarti aksi paling menonjol di etalase adalah menggulir.

   ⚠️ `min-width: 220px` DICABUT. Di layar 375px itu 58,7% lebar layar — dua kali
   lebar satu kartu game (109px) — jadi tombol sekunder jadi benda terbesar di
   bagian itu. Sekarang selebar isinya saja, bentuk pil, dengan angka sisa game di
   labelnya supaya pendek DAN memberi tahu apa yang didapat kalau ditekan.
   Tingginya tetap 44px dari `.btn` dasar. */
.games-more .btn {
  border-radius: var(--radius-pill);
  padding: 0 20px;
  font-size: .85rem;
}


.tentang { margin-top: 22px; }
.tentang-card {
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  background: var(--gold-bg);
  padding: 18px 16px;
}
.tentang-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tentang-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: contain; flex-shrink: 0; }
.tentang-nama { font-size: 15.5px; font-weight: 800; letter-spacing: .02em; color: var(--gold-text); }
.tentang-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.tentang-grid {
  display: grid;
  /* minmax(0,…) wajib: `1fr` telanjang menolak menyempit di bawah lebar isi
     terlebarnya, dan tiga kolom di layar 390px persis kasus yang memicunya. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.tentang-item {
  border: 1px solid var(--gold-border);
  border-radius: 13px;
  background: var(--surface);
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  min-width: 0;
}
.tentang-ico { display: block; width: 22px; height: 22px; }
.tentang-item-title { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--text); }
@media (max-width: 380px) { .tentang-item-title { font-size: 11.5px; } }

/* ==== Header sapaan + tema + saldo (2026-08-17) ============================== */

/* Blok kiri: logo + dua baris teks. Brand TETAP ada — yang ditambahkan sapaan,
   bukan pengganti wordmark-nya. */
.brand-sapa { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Logo itu tautan ke beranda, jadi dia tap target. Terukur 32px di audit
   2026-08-17 — tingginya ikut gambar, bukan ikut batas tap. */
.brand-sapa .brand { padding: 0; min-height: 44px; display: inline-flex; align-items: center; }
.brand-sapa-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Baris atas = nama toko, ditulis sebagai label kelompok (11,5px/700/uppercase)
   supaya sepadan dengan judul bagian lain di situs. Kecil dengan sengaja: yang
   dicari mata pembeli namanya sendiri, bukan nama tokonya. */
.brand-sapa-nama {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none !important;
  line-height: 1.2;
}
.brand-sapa-halo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none !important;
  line-height: 1.25;
  /* Nama panjang dipotong, BUKAN dibiarkan mendorong saldo keluar layar —
     header cuma 375px di HP. Pola yang sama sudah dipakai pill akun lama. */
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-sapa-halo strong { color: var(--text); font-weight: 800; }

/* Penukar tema. Lingkaran netral — bukan aksi utama halaman mana pun, jadi tidak
   boleh menarik perhatian lebih dari tombol beli. */
.header-tema {
  flex-shrink: 0;
  /* 44px, bukan 38: batas tap mobile di CLAUDE.md. Terukur 38px waktu pertama
     dibuat — dan selisih 6px itu justru yang tidak terlihat mata. */
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-field);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
.header-tema:hover { border-color: var(--gold-border); }
.header-tema-ico { display: block; width: 19px; height: 19px; }
/* Ikon repo pakai stroke="currentColor" → sebagai <img> WAJIB difilter. */
.header-tema-ico { filter: invert(78%) sepia(6%) saturate(180%) brightness(103%); }
:root[data-theme="light"] .header-tema-ico { filter: invert(24%) sepia(5%) saturate(200%); }
/* CSS yang memilih ikon, BUKAN JS yang menukar `src`: lewat JS ikonnya sempat
   salah selama satu frame di tiap pemuatan halaman. Tema gelap → tawarkan bulan?
   Tidak: yang ditampilkan adalah tema yang AKAN dituju kalau ditekan. Di gelap
   berarti matahari, di terang berarti bulan. */
.header-tema-bulan { display: none; }
.header-tema-matahari { display: block; }
:root[data-theme="light"] .header-tema-bulan { display: block; }
:root[data-theme="light"] .header-tema-matahari { display: none; }

/* Saldo + pintu isi saldo, satu blok. Tampil di HP JUGA sejak 2026-08-17 —
   ruangnya ada karena nama akun sudah pindah ke kiri. */
.header-actions a.header-saldo,
a.header-saldo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  /* Pill ini SATU tautan, jadi dia satu tap target — 44px, bukan setinggi isinya. */
  min-height: 44px;
  padding: 4px 4px 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  text-decoration: none !important;
}
.header-saldo-teks { display: flex; flex-direction: column; gap: 0; text-align: right; }
.header-saldo-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.2;
}
.header-saldo-n { font-size: 13px; color: var(--gold-text); white-space: nowrap; line-height: 1.25; }
/* ⚠️ Lingkaran GARIS emas, bukan emas terisi. Header hidup di SETIAP layar, jadi
   tombol emas di sini bertabrakan dengan aksi utama tiap halaman ("Bayar
   sekarang") dan melanggar aturan 1-emas-per-layar yang dijaga `HardeningTest`.
   Bentuknya mengikuti tombol chat melayang, yang dicabut jadi garis atas alasan
   yang sama persis. */
/* ⚠️ Tanda "+"-nya DIGAMBAR (dua batang), bukan huruf "+" yang ditengahkan.
   Dilaporkan user 2026-08-17: tandanya terlihat tidak di tengah lingkaran.
   Terukur benar — tintanya **2px di bawah** titik tengah lingkaran 28px.

   Sebabnya `place-items: center` + `line-height: 1` menengahkan KOTAK BARIS,
   bukan tintanya. Kotak baris setinggi ascent+descent font (18+4 untuk 17px
   Plus Jakarta Sans), sementara tinta "+" cuma 9px dan duduk SELURUHNYA di atas
   garis alas (descent 0). Menengahkan kotaknya berarti menaruh garis alas terlalu
   rendah, dan tandanya ikut turun.

   `getComputedStyle` menjawab `align-items: center` — benar, dan tidak menjawab
   pertanyaannya. Yang menjawab: TextMetrics `actualBoundingBox*` dibanding titik
   tengah kotaknya (`scripts/ukur-glyph-tengah.js`).

   Batang CSS tidak punya metrik font sama sekali, jadi dia tepat di semua font,
   semua OS, dan tidak berubah waktu font web gagal dimuat. Menambal dengan
   `padding-bottom` atau `translateY` cuma benar untuk satu font. */
.header-saldo-plus {
  flex-shrink: 0;
  /* `display` WAJIB ditulis. Dulu `display: grid` yang memblokkan `<span>` ini
     sehingga `width`/`height` berlaku; begitu grid-nya dicabut dia kembali jadi
     `inline` — dan di elemen inline dua ukuran itu diabaikan diam-diam. Di header
     dia kebetulan tetap 28px karena induknya `inline-flex` (anak flex diblokkan
     otomatis), jadi bugnya tidak akan terlihat sampai span ini dipakai di tempat
     lain. Terukur 2×2 waktu diuji di luar header. */
  display: block;
  width: 28px; height: 28px;
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--gold-border);
  background: var(--surface);
  color: var(--gold-text);
  /* Elemennya KOSONG di Blade — tandanya lahir dari dua batang di bawah.
     `font-size: 0` tetap dipasang sebagai pagar: kalau suatu hari ada yang
     menaruh huruf ke dalamnya lagi, huruf itu tidak ikut terlihat. */
  font-size: 0;
}
.header-saldo-plus::before,
.header-saldo-plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
}
.header-saldo-plus::before { width: 11px; height: 2px; transform: translate(-50%, -50%); }
.header-saldo-plus::after  { width: 2px; height: 11px; transform: translate(-50%, -50%); }

/* Tombol Masuk untuk tamu — garis emas, alasan sama dengan "+" di atas. */
.header-masuk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 16px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-border);
  background: var(--gold-bg);
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.header-masuk:hover { border-color: var(--gold); }
.header-masuk.active { border-color: var(--gold); background: var(--gold-chip); }

/* Diukur di 375px: label MASIH muat (sisa ruang 62px), jadi batasnya diturunkan
   ke 360px. Menyembunyikan label yang sebenarnya muat cuma membuang konteks. */
@media (max-width: 360px) {
  /* Layar tersempit: label dilepas, angkanya tetap. Yang dicari orang angkanya;
     labelnya bisa disimpulkan dari bentuk pill emasnya. */
  .header-saldo-label { display: none; }
  .brand-sapa-halo { max-width: 38vw; }
}

/* ── Popup pengumuman ─────────────────────────────────────────────────────────
   Lahir 2026-09-15. Empat angka di bawah datang dari ongkos NYATA di daengkoin.store,
   bukan dari selera — sesi sana membongkarnya per-blok di peramban owner.        */
.dk-popup {
  position: fixed;
  inset: 0;
  /* Sejajar `.order-sheet` (200): dua-duanya overlay layar penuh, dan dua-duanya
     lahir di luar `.page`. Nol ada yang boleh di antara mereka. */
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px 16px;
}
.dk-popup[hidden] { display: none !important; }
.dk-popup-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.dk-popup-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  /* Panel NOL boleh melebihi layar: baris tombol hidup di luar area gulung, jadi
     tingginya dibatasi di sini dan yang mengalah isinya. */
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  background: var(--surface);
  overflow: hidden;
  animation: dk-popup-naik .18s ease-out;
}
@keyframes dk-popup-naik { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Tombol × digambar DUA BATANG, bukan huruf — glyph `×` nol pernah di tengah
   (CLAUDE.md, terukur 4px turun di lingkaran 64px). */
.dk-popup-x {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: grid;
  border: 1px solid var(--border-field);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  z-index: 2;
}
.dk-popup-x::before, .dk-popup-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: var(--muted);
  border-radius: 2px;
}
.dk-popup-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.dk-popup-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

.dk-popup-scroll { overflow-y: auto; padding: 0 0 4px; }

/* ⛔ `contain`, BUKAN `cover`. Gambar popup itu poster ber-teks; `cover` membuang
   headline yang justru jadi alasan gambarnya dipasang. Bilah sewarna kartu mengisi
   sisa kotaknya. */
.dk-popup-img {
  display: block;
  width: 100%;
  /* ⛔ DUA batas sekaligus, dan ini yang paling mudah terlewat: di layar LEBAR tinggi
     gambar ditentukan LEBAR DIALOG, bukan tinggi layar. Gambar 1536×1024 di panel
     420px jadi 280px, jadi `34vh` sendirian nol pernah kena di desktop. */
  max-height: min(34vh, 250px);
  object-fit: contain;
  background: var(--surface-2);
}
.dk-popup-judul { margin: 16px 18px 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.dk-popup-teks {
  margin: 9px 18px 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
  /* Teks biasa dari panel admin — baris barunya dihormati TANPA menyuntikkan HTML. */
  white-space: pre-line;
}

/* Penanda "masih ada di bawah". Dimatikan JS begitu sampai dasar — gradasi yang
   menyala terus itu bohong. */
.dk-popup-fade {
  height: 22px;
  margin-top: -22px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.dk-popup-fade[hidden] { display: none; }

/* ⛔ DI LUAR area gulung. Versi pertama toko sebelah menaruh tombol di dalam badan
   yang menggulung; di HP ≤667px tombolnya benar-benar DI LUAR LAYAR, dan owner
   melaporkannya sebagai "tombol close-nya kurang jelas" — padahal memang nol ada. */
.dk-popup-aksi {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}
.dk-popup-diam {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  /* Baris centang sengaja 44px juga — dia keputusan, bukan hiasan. */
  min-height: 44px;
  cursor: pointer;
}
.dk-popup-diam[hidden] { display: none; }
.dk-popup-diam input { width: 17px; height: 17px; accent-color: var(--gold); }

body.dk-popup-open { overflow: hidden; }