/* 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;
  --muted-2: #78736A;       /* 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;
  --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); }

/* ——— 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%); }

@media (min-width: 900px) {
  .screen-title { font-size: 26px; }
}

/* ——— Store shell ——— */
.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);
  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);
  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); }

.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);
  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;
  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;
  grid-template-columns: repeat(5, 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 {
  outline: 2px solid var(--gold);
  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);
  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;
  flex-shrink: 0;
}
.history-search-submit:hover { color: var(--gold); }
.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; }

/* Mobile: stack rail + cards (desk grid only @1024) */
.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;
}
.admin-side-close {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-field);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
}
.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 = #9A7509). */
.kpi-gmv-n,.kpi-gmv .n{color:var(--gold-text)!important;font-size:1.15rem}
.dash-rank{color:var(--gold);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}
.settings-panel[hidden]{display:none!important}

/* ——— 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)}
.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);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)}
.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:#4ADE80;background:#0F2318;border-color:transparent}
.products-status-chip.is-off{color:#F87171;background:#241414;border-color:#3A2222}
.products-status-chip.is-local{color:var(--gold-text);background:var(--gold-chip);border-color:transparent;text-transform:uppercase}
.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 #3A2222 !important;color:#F87171 !important;background:transparent !important;
}
.btn-danger-outline:hover{background:#241414 !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:#F87171;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:#F87171}
.logs-row-err{background:rgba(36,20,20,.55)}
.logs-http-ok{color:#4ADE80;font-weight:700}
.logs-http-err{color:#F87171;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:#3A2222;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)}
.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); }
.header-pill.active img { filter: invert(84%) sepia(45%) saturate(700%) hue-rotate(359deg) brightness(104%); }

/* 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%; }
.banner-slide img,
.banner-slide a {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.banner-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 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 2 kolom, artwork 1:1 */
.game-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.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;
}
.game-card-body { padding: 11px 12px 13px; }
.game-card-name { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.game-card-price { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.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);
}
.pay-logo img { border-radius: 5px; }

/* 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],
.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); }
.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;
}

.nom-grid { display: grid; grid-template-columns: 1fr 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); }
.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); }
/* Baris saldo buat pengunjung yang belum punya akun: tautan, bukan pilihan.
   Ditampilkan justru supaya harga tanpa biaya admin kelihatan sebelum daftar. */
.pay-opt-locked { text-decoration: none; color: inherit; }
.pay-opt-locked .pay-opt-total { color: var(--gold); }

.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; }

/* ═══════════════════════════════════════════════════════════════
   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;
}

/* 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: #151A24; }
.st-ico-bad { background: #241414; color: #F87171; line-height: 1; }
.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); }

.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);
  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;
}

/* —— R3.8 Desktop (min-width 1024) — mobile base di atas tidak diubah —— */
.desk-nav,
.header-desk-contact,
.order-desk-side { display: none; }
/* Di HP tombol CS-nya yang melayang; pill di header cuma muncul ≥1024px. */

@media (min-width: 1024px) {
  .shell {
    max-width: 1200px;
    box-shadow: none;
    border-left: 1px solid var(--border-soft);
    border-right: 1px solid var(--border-soft);
  }
  .shell.has-bottom-nav,
  .shell.has-sticky {
    padding-bottom: 28px;
  }

  .header {
    height: 72px;
    padding: 0 22px;
    gap: 20px;
  }
  .header-left { flex-shrink: 0; }
  .header-actions { flex-shrink: 0; gap: 10px; }

  .desk-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .desk-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
  }
  .desk-nav-ico { width: 17px; height: 17px; flex-shrink: 0; }
  .desk-nav a:hover,
  .desk-nav a.active {
    color: var(--gold-text);
  }

  .header-pill-mobile { display: none !important; }
  /* Wadahnya relative supaya menu pilihan kanal menempel di bawah tombolnya. */
  .header-desk-contact { display: inline-block; position: relative; }
  .header-desk-contact .cs-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 15px;
    border: 1px solid var(--border-field);
    border-radius: 11px;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
  }
  .header-desk-contact .cs-trigger:hover { border-color: var(--gold-border); color: var(--gold-text); }
  /* Di header menunya turun ke bawah, bukan naik seperti tombol melayang. */
  .header-desk-contact .cs-menu { top: calc(100% + 8px); bottom: auto; }

  .bottom-nav { display: none !important; }
  .site-footer { padding-bottom: 20px; }

  .page { padding: 22px 24px 32px; }

  /* Tombol CS melayang: tanpa offset bottom-nav */
  .cs-fab-wrap.cs-fab-nav,
  .cs-fab-wrap.cs-fab-sticky {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: max(16px, calc(50% - 600px + 16px));
  }

  /* Home */
  .banner-slide img,
  .banner-slide a,
  .banner-placeholder {
    aspect-ratio: 3 / 1;
    border-radius: 20px;
  }
  .game-grid-2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  .banner-slider {
    border-radius: 16px;
  }
  .banner-slide img,
  .banner-slide a {
    aspect-ratio: 3 / 1;
    object-fit: cover;
  }
  .game-search {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Order: 2-col + ringkasan; hide mobile sticky bar */
  .order-desk {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
  }
  .order-desk-side { display: block; }
  .order-desk-card {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 20px;
  }
  .order-desk-card-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 14px;
  }
  .order-desk-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 14px;
  }
  .order-desk-total-block { margin-bottom: 16px; }
  .order-desk-total-block .total { font-size: 22px; margin-top: 4px; }
  .order-desk-note { margin: 12px 0 0; font-size: 12px; line-height: 1.4; }
  /* Cuma layar yang PUNYA pengganti di desktop yang boleh menyembunyikan bar-nya.
     Dulu aturannya `.sticky-bar{display:none!important}` tanpa syarat — akibatnya
     /saldo/isi dan /order/{id}/saldo kehilangan satu-satunya tombol submit di
     ≥1024px (nol tombol submit terlihat, layarnya jadi buntu). */
  .sticky-bar-desk-hidden { display: none !important; }

  /* Bayar pending */
  .pay-desk,
  .status-pending-wrap {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  main.page:has(.qr-paper) {
    display: block;
  }
  main.page:has(.qr-paper) .pay-timer { max-width: 920px; margin-left: auto; margin-right: auto; }
  main.page:has(.qr-paper) .qr-paper,
  main.page:has(.qr-paper) .pay-total,
  main.page:has(.qr-paper) .pay-steps-label,
  main.page:has(.qr-paper) .pay-steps,
  main.page:has(.qr-paper) .pay-actions,
  main.page:has(.qr-paper) .pay-foot,
  main.page:has(.qr-paper) .pay-oid {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Status result */
  .st-hero,
  .st-timeline,
  .st-summary,
  .st-actions {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* R3.8.1 Riwayat desktop: rail 340 + table-look rows (single DOM) */
  .history-desk {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
  }
  .history-rail { margin-bottom: 0; }
  .history-rail-card { padding: 20px 22px; border-radius: 18px; }
  .history-rail-title { font-size: 16.5px; }
  .history-search-submit-gold {
    color: var(--on-gold) !important;
    background: var(--gold) !important;
    border-radius: 10px;
    padding: 8px 14px !important;
    font-weight: 800;
  }
  .history-search-submit-gold:hover { filter: brightness(1.05); color: var(--on-gold) !important; }
  .history-main {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 0;
    overflow: hidden;
  }
  .history-table-head {
    display: grid;
    grid-template-columns: 1.6fr 1fr .9fr .9fr .7fr;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--divider);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .history-card {
    display: grid;
    grid-template-columns: 1.6fr 1fr .9fr .9fr .7fr;
    grid-template-areas: none;
    gap: 12px;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--divider);
    border-radius: 0;
    background: transparent;
    padding: 16px 22px;
  }
  .history-card:last-child { border-bottom: 0; }
  .history-card:hover { background: var(--surface-3); border-color: transparent; border-bottom-color: var(--divider); }
  .history-col-product,
  .history-col-oid,
  .history-col-time,
  .history-col-total,
  .history-col-status {
    display: block;
    grid-area: auto;
    padding-top: 0;
    border-top: 0;
    justify-self: stretch;
  }
  .history-col-status { justify-self: start; }
  .history-col-total { justify-self: start; font-size: 14.5px; }
  .history-col-oid { font-size: 13px; color: var(--text-2); }
  .history-col-time { font-size: 13.5px; }
  .history-time-mobile { display: none; }
  .history-card-icon { width: 36px; height: 36px; border-radius: 10px; }
  .history-cap {
    text-align: left;
    padding: 14px 22px;
    margin: 0;
    border-top: 1px solid var(--divider);
  }
  .history-empty { max-width: 480px; margin-left: auto; margin-right: auto; }

  /* Lacak / Bantuan */
  .lacak-form,
  .lacak-recent,
  .lacak-hint,
  .help-steps,
  .help-faq,
  .help-cta-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  .help-steps { max-width: 720px; }
}

/* —— 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;
  --muted:#6E6A61;
  --muted-2:#78736A;
  --gold:#FEC832;
  --on-gold:#17140C;
  --gold-text:#9A7509;
  --gold-bg:#F7E9C4;
  --gold-chip:#F7E9C4;
  --gold-border:#E0AE1C;
  --gold-soft:rgba(154,117,9,.18);
  --gold-dim:#E0AE1C;
  --ok:#157F3C; --ok-bg:#DDEFE2;
  --danger:#C43B3B; --danger-bg:#F6E2E0; --danger-border:#E0B4B0;
  --info:#1D4ED8;
  --stale-bg:#F7E9C4; --stale-border:#E0AE1C;
}
:root[data-theme="light"] .dash-pill.active{
  background:#17150F;color:#F6F3EE;border-color:#17150F;
}
:root[data-theme="light"] .products-status-chip.is-on{color:#157F3C;background:#DDEFE2}
:root[data-theme="light"] .products-status-chip.is-off{color:#C43B3B;background:#F6E2E0;border-color:#E0B4B0}
:root[data-theme="light"] .products-status-chip.is-local{color:#9A7509;background:#F7E9C4}
:root[data-theme="light"] .btn-danger-outline{border-color:#E0B4B0 !important;color:#C43B3B !important}
: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;
}

@media (min-width: 1024px) {
  .price-search { max-width: 420px; }
  /* Dulu .price-group dibatasi 760px waktu desktop masih satu kolom sempit.
     Sekarang desktop pakai rail + tabel (Store 1a Desktop layar 05), jadi
     grupnya harus mengisi kolom kanan — batas itu dihapus. */
  .price-note { max-width: 760px; }
}

/* ═══════════════════════════════════════════════════════════════
   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); }

.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); }
.auth-otp-submit { margin-top: 14px; }
.auth-otp-resend { margin-top: 16px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   Layar 13 — Profil
   ═══════════════════════════════════════════════════════════════ */
.profile-theme-btn {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-field);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.profile-theme-btn:hover { border-color: var(--gold-border); color: var(--gold-text); }

.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; }
.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); }

@media (min-width: 1024px) {
  /* Layar OTP tetap satu kolom sempit; /masuk punya layout dua kolom sendiri
     di blok "Store 1a Desktop layar 06-08" di bawah. */
  .auth-screen:not(.auth-screen-split) { max-width: 460px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   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); }
.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;
}

/* ═══════════════════════════════════════════════════════════════
   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; }

@media (min-width: 1024px) {
  .wallet-card, .wallet-hero, .wallet-month, .wallet-note,
  .bal-product, .bal-summary, .bal-after, .bal-short { max-width: 640px; }
  .tglink-steps, .tglink-code, .tglink-connected, .tglink-open { max-width: 640px; }
}

/* ==== 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); }

.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); }

/* ==== 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){
  .adj-split{grid-template-columns:1fr}
  .adj-stats{grid-template-columns:1fr}
}
.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);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);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}

/* ===== Harga desktop — Store 1a Desktop.dc.html, layar 05 ===== */
/* Di HP semua ini tidak aktif: rail disembunyikan, baris tetap flex seperti
   sebelumnya, dan kolom Kategori/Top up ikut disembunyikan. */
.price-row-cat,
.price-row-cta,
.price-thead,
.price-rail,
.price-group-from{display:none}

@media (min-width:1024px){
  .price-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:20px;align-items:start}
  .price-main{min-width:0;display:flex;flex-direction:column;gap:18px}
  .price-pills{display:none}          /* di desktop filternya pindah ke rail */
  .price-group-from{display:inline}

  .price-rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:76px;
    padding:16px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
  .price-rail-group{display:flex;flex-direction:column;gap:2px}
  .price-rail-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);padding:0 8px;margin-bottom:6px}
  .price-rail-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:10px;background:transparent;
    color:var(--text-2);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left}
  .price-rail-item:hover{background:var(--surface-2);color:var(--text)}
  .price-rail-item.is-on{background:var(--gold-bg);color:var(--gold-text);font-weight:700}
  .price-rail-n{font-size:12.5px;color:var(--muted);flex-shrink:0}
  .price-rail-item.is-on .price-rail-n{color:var(--gold-text)}

  /* Baris jadi kolom tabel. Grid-nya sama persis dengan .price-thead supaya
     judul kolom dan isinya benar-benar sejajar. */
  .price-thead,
  .price-row{display:grid;
    grid-template-columns:minmax(0,1fr) 130px 120px 130px 104px;
    gap:14px;align-items:center}
  .price-thead{padding:0 16px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted)}
  .price-row{padding:12px 16px}
  .price-card{padding:0;overflow:hidden}
  .price-row-icon{grid-row:1;justify-self:start}
  .price-row-body{display:flex;align-items:center;gap:10px;min-width:0}
  .price-row-code{grid-column:2}
  .price-row-cat{display:block;font-size:13.5px;color:var(--text-2)}
  .price-row-price{justify-self:start}
  .price-row-cta{display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;padding:0 16px;border:1px solid var(--border-field);border-radius:10px;
    font-size:13px;font-weight:700;color:var(--text-2);justify-self:end}
  .price-row:hover .price-row-cta{border-color:var(--gold-border);color:var(--gold-text)}

  /* display:contents membuat isi .price-row-body ikut grid baris, jadi markup
     mobile (kode di bawah nama) tidak perlu diubah demi layout desktop. */
  .price-row{grid-template-areas:"produk code cat harga cta"}
  .price-row-body{display:contents}
  .price-row-icon{grid-area:produk;justify-self:start;align-self:center}
  .price-row-name{grid-area:produk;padding-left:46px;display:flex;align-items:center;gap:8px;min-width:0}
  .price-row-code{grid-area:code;margin:0}
  .price-row-cat{grid-area:cat}
  .price-row-price{grid-area:harga}
  .price-row-cta{grid-area:cta}
}

/* ═══════════════════════════════════════════════════════════════
   Store 1a Desktop — layar 06 Masuk / 07 Profil / 08 Isi Saldo
   ═══════════════════════════════════════════════════════════════ */

/* Bagian yang cuma ada di desain desktop. Default disembunyikan supaya
   layar HP (Store 1a Semua Screen 12–14) tetap persis seperti desainnya. */
.auth-pitch,
.auth-sub-desk,
.profile-joined,
.profile-stat-desk,
.profile-menu-desk,
.profile-sec-meta,
.topup-head,
.topup-recent,
.topup-side { display: none; }

/* Baris menu desktop ada di awal DOM. Di HP baris itu hilang, jadi garis
   pemisahnya harus ikut hilang — kalau tidak, baris pertama yang tampil
   dapat garis atas yang menggantung. */
.profile-menu-desk + .profile-menu-row { border-top: 0; }

@media (min-width: 1024px) {
  /* ——— 06 Masuk ——— */
  .auth-screen-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 60px;
    align-items: center;
    max-width: none;
    min-height: 0;
    padding-top: 34px;
  }
  .auth-pitch { display: block; }
  .auth-pitch-title {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.2;
    max-width: 16ch;
  }
  .auth-pitch-sub {
    margin: 14px 0 0;
    max-width: 54ch;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
  }
  .auth-pitch-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .auth-pitch-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--text-2);
  }
  .auth-pitch-n {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--gold-chip);
    color: var(--gold-text);
    font-size: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .auth-panel {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    padding: 28px;
  }
  .auth-intro { text-align: left; padding: 0; }
  .auth-logo { display: none; }
  .auth-title { margin: 0; font-size: 22px; }
  .auth-title-rest { display: none; }
  .auth-sub { display: none; }
  .auth-sub-desk { display: block; margin: 7px 0 0; font-size: 13.5px; color: var(--muted); }
  .auth-options { margin-top: 22px; }
  .auth-or, .auth-guest { margin-top: 20px; }

  /* ——— 07 Profil ——— */
  .profile-desk {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  /* Rail-nya ditulis setelah konten di Blade; posisinya diatur di sini supaya
     urutan DOM di HP tidak perlu diubah. */
  .profile-rail { grid-column: 1; grid-row: 1; margin-top: 0; position: sticky; top: 88px; }
  .profile-main { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 18px; }
  .profile-main > * { margin-top: 0; }
  .profile-main .profile-sec { margin-top: 0; }

  /* Rail = satu kartu; menu + tombol Keluar duduk di dalamnya (desain layar 07).
     Judul "Akun" dibuang karena rail-nya sudah jelas apa isinya. */
  .profile-rail {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 14px 10px;
  }
  .profile-rail > .group-label { display: none; }
  .profile-rail .profile-menu { border: 0; border-radius: 0; background: transparent; padding: 0; }
  .profile-menu-desk { display: flex; }
  .profile-menu-desk + .profile-menu-row { border-top: 1px solid var(--divider); }
  .profile-menu-row { padding: 12px 14px; border-radius: 11px; font-size: 14.5px; }
  .profile-menu-row + .profile-menu-row { border-top: 0; }
  .profile-menu-row:hover { background: var(--surface-2); }
  .profile-menu-row.is-on { background: var(--gold-bg); color: var(--gold-text); font-weight: 700; }
  .profile-menu-row.is-on:hover { background: var(--gold-bg); }
  .profile-rail .profile-logout { margin: 0; }
  .profile-rail .profile-logout::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--divider);
    margin: 10px 4px;
  }
  .profile-rail .profile-logout-btn { border: 0; padding: 12px 14px; border-radius: 11px; text-align: left; }

  /* Badge verifikasi nempel di sebelah nama, bukan terlempar ke pinggir kanan. */
  .profile-card { border-radius: 18px; padding: 22px 24px; gap: 18px; justify-content: flex-start; }
  .profile-card-body { flex: 0 1 auto; }
  .profile-avatar { width: 64px; height: 64px; border-radius: 19px; font-size: 24px; }
  .profile-name { font-size: 22px; letter-spacing: -.02em; }
  .profile-contact { font-size: 13.5px; margin-top: 5px; }
  .profile-joined { display: inline; }

  .wallet-card {
    margin-top: 0;
    border-radius: 18px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 20px;
    align-items: center;
  }
  /* Penempatan eksplisit: tanpa ini keempat anaknya diisi otomatis ke dua kolom
     dan angka saldonya lompat ke kolom kanan. */
  .wallet-card-head, .wallet-card-n, .wallet-card-sub { grid-column: 1; }
  .wallet-card-n { font-size: 32px; }
  .wallet-card-sub { font-size: 13.5px; }
  .wallet-card-actions { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; margin-top: 0; }

  .profile-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 0; }
  .profile-stat { border-radius: 16px; padding: 18px 20px; }
  .profile-stat-n { font-size: 26px; }
  .profile-stat-gold { color: var(--gold-text); }
  .profile-stat-desk { display: block; }
  .profile-stat-label { font-size: 13px; }

  .profile-main .profile-sec .group-label { display: flex; align-items: center; justify-content: space-between; }
  .profile-sec-meta {
    display: inline;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
  }
  .profile-list { border-radius: 18px; padding: 4px 20px; }

  /* ——— 08 Isi Saldo ——— */
  .topup-desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 22px;
    align-items: start;
  }
  .topup-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
  .topup-head { display: block; }
  .topup-head-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
  .topup-head-sub { margin: 7px 0 0; font-size: 14.5px; color: var(--muted); }
  /* Saldo sudah tampil di kartu ringkasan kanan — dua kali jadi mubazir. */
  .topup-main .wallet-balance-card { display: none; }

  /* "Pilih Nominal" & "Bayar Pakai" jadi kartu, seperti di desain. */
  .topup-main .order-sec {
    margin-bottom: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 22px 24px;
  }
  .topup-main .order-sec + .order-sec { margin-top: 18px; }
  .topup-main .topup-grid { grid-template-columns: repeat(4, 1fr); gap: 11px; }
  .topup-main .topup-nom { border-radius: 14px; padding: 16px 14px; }
  .topup-main .topup-nom-n { font-size: 17px; }
  .topup-main .topup-custom { margin-top: 14px; }
  .topup-main .pay-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .topup-main > form > .wallet-note { margin-top: 18px; }

  .topup-recent {
    display: block;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    overflow: hidden;
  }
  .topup-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
  }
  .topup-recent-title { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
  .topup-recent-all { font-size: 13.5px; font-weight: 700; color: var(--gold-text); text-decoration: none !important; }
  .topup-recent-list { padding: 0 20px; }

  .topup-side { display: block; position: sticky; top: 88px; }
  .topup-side-card {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 24px;
  }
  .topup-side-balance { font-size: 32px; letter-spacing: -.02em; margin-top: 8px; }
  .topup-side-sep { height: 1px; background: var(--divider); margin: 20px 0; }
  .topup-side-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--divider);
    font-size: 14px;
  }
  .topup-side-row > span { color: var(--muted); }
  .topup-side-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 14px 0 4px;
    font-size: 14px;
    color: var(--muted);
  }
  .topup-side-total strong { font-size: 24px; letter-spacing: -.01em; color: var(--text); }
  .topup-side-cta { width: 100%; margin-top: 16px; min-height: 52px; font-size: 15.5px; }
  .topup-side-after {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--muted-2);
  }
  .topup-side-after .mono-b { color: var(--text-2); }
  .topup-side-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.6; }

  /* Bar sticky yang TIDAK punya pengganti desktop (mis. bayar order pakai
     saldo) dirapikan biar tidak memenuhi lebar layar. */
  .sticky-bar:not(.sticky-bar-desk-hidden) {
    max-width: 640px;
    border: 1px solid var(--border-soft);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .bal-product, .bal-summary, .bal-after, .bal-short {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==== 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-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}