/**
 * Desktop theme — match JARINGANTOTO screenshot (black / gold / yellow)
 */
@font-face {
  font-family: 'Muli';
  src: url('../fonts/Muli.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Prototype';
  src: url('../fonts/Prototype.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aller;
  font-style: normal;
  font-weight: 300;
  src: url('../../../upload/fonts/Aller_Std_Lt.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aller;
  font-style: normal;
  font-weight: 400;
  src: url('../../../upload/fonts/Aller_Rg.woff2') format('woff2'),
       url('../../../upload/fonts/Aller_Std_Rg.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aller;
  font-style: normal;
  font-weight: 700;
  src: url('../../../upload/fonts/Aller_Std_Bd.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aller;
  font-style: normal;
  font-weight: 800;
  src: url('../../../upload/fonts/Aller_Std_Bd.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: aller;
  font-style: normal;
  font-weight: 900;
  src: url('../../../upload/fonts/Aller_Std_Bd.ttf') format('truetype');
  font-display: swap;
}

:root {
  --jd-black: #050505;
  --jd-panel: #0a0a0a;
  --jd-yellow: #ffe600;
  --jd-gold: #ffd700;
  --jd-green: #18c43a;
  --jd-green-dim: #0b3d14;
  --jd-border: #c9a227;
  --jd-stage: 1100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body.jd-desk {
  font-family: Arial, Helvetica, "Muli", sans-serif;
  color: #fff;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(20,80,20,.55), transparent 50%),
    radial-gradient(ellipse at 80% 40%, rgba(40,20,60,.4), transparent 45%),
    linear-gradient(180deg, #031a08 0%, #000 45%, #02140a 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Wallpaper yang diatur melalui Panel Admin → SEO Website & Logo. */
body.jd-desk.has-admin-bg {
  background-color: #000;
  background-image:
    linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .2)),
    var(--jd-admin-body-bg) !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
body.jd-desk.has-admin-bg .jd-side-art {
  display: none;
}

a { color: var(--jd-yellow); text-decoration: none; }
a:hover { color: #fff; }

/* Decorative side art */
.jd-side-art {
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--jd-stage)) / 2);
  min-width: 0;
  pointer-events: none;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .95;
}
.jd-side-art.left {
  left: 0;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.15), rgba(0,0,0,.75)),
    url("../img/frame/bgmobile.png");
  background-position: left center;
}
.jd-side-art.right {
  right: 0;
  background-image:
    linear-gradient(270deg, rgba(0,0,0,.1), rgba(0,0,0,.8)),
    url("../img/frame/game-online-terbaik-dan-pasti-aman.webp");
  background-position: right center;
}
@media (max-width: 1200px) {
  .jd-side-art { display: none; }
}

/* Center stage */
.jd-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--jd-stage);
  margin: 0 auto;
  background: rgba(0,0,0,.92);
  border-left: 3px solid var(--jd-border);
  border-right: 3px solid var(--jd-border);
  box-shadow:
    0 0 0 1px rgba(255,215,0,.25),
    0 0 40px rgba(255,215,0,.18),
    0 0 80px rgba(0,200,80,.12);
  min-height: 100vh;
}

/* ===== TOP BAR ===== */
.jd-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #111 0%, #000 100%);
  border-bottom: 1px solid #222;
}
.jd-topbar .jd-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.jd-topbar .jd-logo img {
  max-height: 48px;
  max-width: 200px;
  display: block;
}
.jd-topbar .jd-logo-text {
  font-family: Prototype, Impact, sans-serif;
  font-size: 22px;
  color: var(--jd-yellow);
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255,230,0,.5);
}
.jd-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.jd-login-form {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jd-login-form input {
  height: 34px;
  width: 130px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
  color: #111;
  font-size: 13px;
}
.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
}
.jd-btn-yellow {
  background: linear-gradient(180deg, #fff566 0%, #ffe600 40%, #e6c200 100%);
  color: #111 !important;
  box-shadow: 0 2px 0 #9a7b00, 0 0 12px rgba(255,230,0,.35);
}
.jd-btn-yellow:hover { filter: brightness(1.06); color: #111 !important; }
.jd-btn-pengaduan {
  background: #111;
  color: var(--jd-yellow) !important;
  border: 1px solid var(--jd-yellow);
  font-size: 11px;
  height: 30px;
  padding: 0 10px;
}
.jd-member {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.jd-wallet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px 6px 8px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(40,34,10,.95) 0%, rgba(18,16,8,.98) 100%);
  border: 1px solid rgba(255, 214, 0, .45);
  box-shadow:
    inset 0 1px 0 rgba(255,230,100,.18),
    0 0 0 1px rgba(0,0,0,.35),
    0 4px 14px rgba(0,0,0,.35);
  white-space: nowrap;
}
.jd-wallet-user,
.jd-wallet-bal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.jd-wallet-user {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}
.jd-wallet-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff566 0%, #e6c200 100%);
  color: #1a1400;
  font-size: 13px;
  box-shadow: 0 1px 0 #9a7b00, inset 0 1px 0 rgba(255,255,255,.35);
  flex: 0 0 auto;
}
.jd-wallet-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.jd-wallet-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 230, 100, .72);
}
.jd-wallet-name {
  font-weight: 800;
  color: #fff;
  font-size: 13px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-wallet-divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 0;
  background: linear-gradient(180deg, transparent, rgba(255,214,0,.45), transparent);
}
.jd-wallet-bal { padding-right: 2px; }
.jd-wallet-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: #ffe600;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  text-shadow: 0 0 10px rgba(255,230,0,.25);
}
.jd-wallet-currency {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,230,100,.85);
  letter-spacing: .04em;
}
.jd-wallet-amount .bal-amt {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.jd-saldo-refresh {
  appearance: none;
  border: 1px solid rgba(255,214,0,.35);
  background: linear-gradient(180deg, rgba(255,230,0,.18), rgba(255,230,0,.06));
  color: #ffe600;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex: 0 0 auto;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.jd-saldo-refresh:hover {
  background: linear-gradient(180deg, rgba(255,230,0,.32), rgba(255,230,0,.12));
  border-color: rgba(255,214,0,.7);
  transform: translateY(-1px);
}
.jd-saldo-refresh:active { transform: translateY(0); }
.jd-saldo-refresh.is-loading i {
  animation: jd-spin .7s linear infinite;
}
.jd-btn-wd {
  background: linear-gradient(180deg, #7dff8a 0%, #18c43a 55%, #0e9a2a 100%);
  color: #06240c !important;
  box-shadow: 0 2px 0 #0a6b1c, 0 0 12px rgba(24,196,58,.28);
}
.jd-btn-wd:hover { filter: brightness(1.06); color: #06240c !important; }
@keyframes jd-spin {
  to { transform: rotate(360deg); }
}

/* ===== INFO TERKINI (yellow bar) ===== */
.jd-info {
  display: flex;
  align-items: stretch;
  background: var(--jd-yellow);
  color: #111;
  min-height: 34px;
  overflow: hidden;
}
.jd-info-label {
  flex: 0 0 auto;
  background: #111;
  color: var(--jd-yellow);
  font-weight: 800;
  font-size: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.jd-info-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.jd-info-track span {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: jd-marquee 28s linear infinite;
  line-height: 34px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}
@keyframes jd-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ===== MAIN NAV (black + yellow) ===== */
.jd-nav {
  background: #000;
  border-top: 1px solid #222;
  border-bottom: 2px solid var(--jd-yellow);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
}
.jd-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 72px;
  padding: 8px 10px;
  color: var(--jd-yellow) !important;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .3px;
  border-radius: 4px;
}
.jd-nav a i { font-size: 16px; }
.jd-nav a:hover,
.jd-nav a.active {
  background: rgba(255,230,0,.12);
  color: #fff !important;
  text-shadow: 0 0 8px rgba(255,230,0,.6);
}

/* ===== BODY GRID ===== */
.jd-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 10px;
  padding: 10px;
  align-items: start;
}
@media (max-width: 900px) {
  .jd-body { grid-template-columns: 1fr; }
  .jd-side { order: 2; }
  .jd-main { order: 1; }
}

/* Sidebar cards */
.jd-card {
  background: #0d0d0d;
  border: 2px solid var(--jd-yellow);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 0 12px rgba(255,230,0,.15);
}
.jd-card-hd {
  background: var(--jd-yellow);
  color: #111;
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  padding: 8px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.jd-card-bd { padding: 8px; }
.jd-daftar-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #fff566, #e6c200);
  color: #111 !important;
  font-weight: 900;
  font-size: 20px;
  padding: 14px;
  border-radius: 12px;
  border: 2px solid #fff;
  box-shadow: 0 0 16px rgba(255,230,0,.4);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.jd-daftar-btn:hover { filter: brightness(1.05); color: #111 !important; }

.jd-side-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.jd-side-actions .jd-btn { height: 42px; font-size: 11px; }
.jd-side-actions .jd-btn-wd {
  background: linear-gradient(180deg, #7CFF7C, #18c43a) !important;
}

/* Kategori permainan (sidebar kiri) */
.jd-cat-card .jd-card-bd { padding: 6px; }
.jd-cat-list { display: flex; flex-direction: column; gap: 4px; }
.jd-cat-item {
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none !important;
  color: #eee !important;
  background: linear-gradient(90deg, #121212, #0a0a0a);
  border: 1px solid #222;
  transition: border-color .15s, transform .15s, background .15s;
}
.jd-cat-item:hover {
  border-color: var(--cat-accent, var(--jd-yellow));
  transform: translateX(2px);
  background: linear-gradient(90deg, #1a1a10, #0d0d08);
}
.jd-cat-item.active {
  border-color: var(--cat-accent, var(--jd-yellow));
  background: linear-gradient(90deg, rgba(255,230,0,.14), #0d0d08);
  box-shadow: inset 3px 0 0 var(--cat-accent, var(--jd-yellow));
}
.jd-cat-ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #2a2a2a, #141414);
  color: var(--cat-accent, var(--jd-yellow));
  font-size: 15px;
  border: 1px solid #333;
}
.jd-cat-ico img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.jd-cat-item.active .jd-cat-ico {
  background: linear-gradient(180deg, #ffe600, #c79a00);
  color: #1a1400;
  border-color: #a37f00;
}
.jd-cat-item.active .jd-cat-ico img {
  filter: brightness(0);
}
.jd-cat-lab {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.jd-cat-arrow { color: #555; font-size: 10px; text-align: right; }
.jd-cat-item.active .jd-cat-arrow,
.jd-cat-item:hover .jd-cat-arrow { color: var(--cat-accent, var(--jd-yellow)); }

.jd-hasil-date {
  text-align: center;
  color: #ffe600;
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
}
.jd-hasil-empty { color: #888; font-size: 11px; text-align: center; padding: 8px 0; }
.jd-hasil-more { text-align: center; margin-top: 8px; }
.jd-hasil-more a { font-size: 11px; font-weight: 800; }

.jd-feed {
  max-height: 140px;
  overflow: hidden;
  position: relative;
}
.jd-feed-inner {
  animation: jd-feed-scroll 18s linear infinite;
}
.jd-feed:hover .jd-feed-inner { animation-play-state: paused; }
@keyframes jd-feed-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.jd-feed-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 4px;
  font-size: 11px;
  border-bottom: 1px solid #1a1a1a;
  color: var(--jd-yellow);
}
.jd-feed-row .amt { color: #7CFF7C; font-weight: 700; }
.jd-feed-row.depo .amt { color: var(--jd-yellow); }

/* Hasil compact */
.jd-hasil-list { font-size: 11px; }
.jd-hasil-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px;
  padding: 4px 2px;
  border-bottom: 1px solid #1c1c1c;
}
.jd-hasil-row .name { color: #ccc; }
.jd-hasil-row .num { color: var(--jd-yellow); font-weight: 800; }

/* Main panel */
.jd-main-inner {
  background: #000;
  border: 2px solid #333;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: visible;
  min-height: 400px;
}

/* Banner carousel — proporsi desktop yang nyaman */
.jd-banner-wrap {
  position: relative;
  background: #050505;
  line-height: 0;
  width: 100%;
  max-width: 100%;
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  border-radius: 0;
}
@media (max-width: 1100px) {
  .jd-banner-wrap { height: 260px; max-height: 260px; }
}
@media (max-width: 900px) {
  .jd-banner-wrap { height: 200px; max-height: 200px; }
}
.jd-banner-slide {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jd-banner-slide.active { display: block; }
.jd-banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.jd-banner-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 3;
}
.jd-banner-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 0;
}
.jd-banner-dots button.active {
  background: var(--jd-yellow);
  box-shadow: 0 0 8px rgba(255,230,0,.8);
}
.jd-banner-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #888;
  line-height: 1.4;
  background: linear-gradient(135deg, #0a2a0a, #000);
  font-size: 13px;
  padding: 20px;
}

/* Progressive Jackpot — desktop board */
.jd-jp {
  position: relative;
  margin: 0;
  padding: 14px 12px 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,210,0,.18), transparent 55%),
    linear-gradient(180deg, #1a1400 0%, #070705 55%, #050505 100%);
  border-top: 1px solid rgba(255,214,0,.28);
  border-bottom: 1px solid rgba(255,214,0,.2);
}
.jd-jp-glow {
  pointer-events: none;
  position: absolute;
  inset: -20% 10% auto;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(255,230,0,.22), transparent 70%);
  filter: blur(8px);
}
.jd-jp-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 14px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}
.jd-jp-brand {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,214,0,.35);
  background: #000;
  box-shadow: 0 0 18px rgba(255,200,0,.12);
  min-height: 140px;
}
.jd-jp-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.jd-jp-live {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.72);
  color: #ff4d4d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,80,80,.45);
}
.jd-jp-live i {
  font-size: 8px;
  animation: jd-jp-pulse 1.1s ease-in-out infinite;
}
.jd-jp-board {
  position: relative;
  border-radius: 12px;
  padding: 16px 18px 14px;
  text-align: center;
  color: #ffe600;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    var(--jd-jp-bg);
  background-size: cover, 100% 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,214,0,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,240,150,.25),
    0 8px 24px rgba(0,0,0,.45),
    0 0 24px rgba(255,200,0,.12);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.jd-jp-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #fff8c4;
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 12px rgba(255,230,0,.35);
}
.jd-jp-title i { color: #ffe600; font-size: 14px; }
.jd-jp-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
  line-height: 1;
  margin: 4px 0 2px;
}
.jd-jp-cur {
  font-size: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
.jd-jp-num {
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: #ffe600;
  text-shadow:
    0 2px 0 #7a5a00,
    0 0 18px rgba(255,230,0,.55),
    0 0 2px rgba(0,0,0,.9);
}
.jd-jp-sub {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.jd-jp-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.jd-jp-tier {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,214,0,.28);
  border-radius: 8px;
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jd-jp-tier .t {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: rgba(255,230,100,.75);
}
.jd-jp-tier .v {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
@keyframes jd-jp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (max-width: 900px) {
  .jd-jp-inner { grid-template-columns: 1fr; }
  .jd-jp-brand { min-height: 110px; max-height: 140px; }
  .jd-jp-num { font-size: 30px; }
}

.jd-tagline {
  background: #000;
  color: var(--jd-yellow);
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .5px;
  padding: 10px 8px;
  text-transform: uppercase;
  border-top: 1px solid #222;
  text-shadow: 0 0 10px rgba(255,230,0,.35);
}

/* Stats bar */
.jd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 10px;
  background: var(--jd-yellow);
  color: #111;
}
.jd-stat {
  background: #111;
  color: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}
.jd-stat .lbl {
  color: var(--jd-yellow);
  font-weight: 900;
  font-size: 12px;
}
.jd-stat .val { font-size: 18px; font-weight: 900; margin-top: 2px; }
.jd-stat .bar {
  height: 6px;
  background: #333;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.jd-stat .bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #18c43a, #ffe600);
}

/* Game tiles */
.jd-section {
  padding: 12px 10px;
}
.jd-section-title {
  color: var(--jd-yellow);
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-shadow: 0 0 8px rgba(255,230,0,.4);
}
.jd-games {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) {
  .jd-games { grid-template-columns: repeat(2, 1fr); }
  .jd-stats { grid-template-columns: 1fr; }
}
.jd-game {
  display: block;
  background: linear-gradient(180deg, #0d2a10, #050505);
  border: 2px solid var(--jd-border);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  color: var(--jd-yellow) !important;
  box-shadow: inset 0 0 20px rgba(0,180,40,.2), 0 0 10px rgba(255,215,0,.2);
  transition: transform .15s ease;
}
.jd-game:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(255,230,0,.45);
  color: #fff !important;
}
.jd-game img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  background: #111;
}
.jd-game span {
  display: block;
  padding: 8px 4px;
  font-weight: 900;
  font-size: 11px;
  text-transform: uppercase;
}

/* Home kategori tiles — rapi & seragam */
.jd-games-home {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 2px 8px;
}
@media (max-width: 900px) {
  .jd-games-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jd-games-home .jd-game {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 214, 0, .35);
  border-radius: 12px;
  background: linear-gradient(180deg, #141208 0%, #070705 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  overflow: hidden;
  position: relative;
}
.jd-games-home .jd-game::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,230,0,.08);
}
.jd-games-home .jd-game:hover {
  border-color: var(--jd-yellow);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(255,214,0,.18);
}
.jd-games-home .jd-game-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255,214,0,.18), transparent 60%),
    #0a0a0a;
  position: relative;
}
.jd-games-home .jd-game-pic img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: scale(var(--ico-scale, 1));
  transition: transform .25s ease;
}
.jd-games-home .jd-game-pic .jd-game-fa {
  font-size: 42px;
  color: #fff;
  line-height: 1;
  transition: transform .25s ease;
}
.jd-games-home .jd-game:hover .jd-game-pic img {
  transform: scale(calc(var(--ico-scale, 1) * 1.1));
}
.jd-games-home .jd-game:hover .jd-game-pic .jd-game-fa {
  transform: scale(1.1);
}
.jd-games-home .jd-game-lab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #ffe600 !important;
  background: linear-gradient(180deg, #1c1808, #0c0c04);
  border-top: 1px solid rgba(255,230,0,.22);
}
.jd-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jd-link-more {
  font-size: 11px;
  font-weight: 800;
  color: var(--jd-yellow) !important;
  text-transform: none;
  letter-spacing: 0;
}
.jd-home-prov { padding: 0 4px 4px; }
.jd-prov-card-link {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Provider category tabs */
.jd-prov-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: #0b0b0b;
  border: 1px solid #242424;
  border-radius: 10px;
}
.jd-prov-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1px solid #333;
  background: #141414;
  color: #ccc !important;
  font-size: 11.5px;
  font-weight: 800;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.jd-prov-tab:hover { border-color: var(--jd-yellow); color: #fff !important; }
.jd-prov-tab.active {
  background: linear-gradient(180deg, #ffe600, #c79a00);
  color: #1a1400 !important;
  border-color: #a37f00;
}

/* Promo accordion list */
.jd-promo-list { display: flex; flex-direction: column; gap: 10px; }
.jd-promo-row {
  background: linear-gradient(180deg, #0d0d0d, #070707);
  border: 1px solid rgba(255,214,0,.28);
  border-radius: 10px;
  overflow: hidden;
}
.jd-promo-row.open { border-color: var(--jd-yellow); box-shadow: 0 0 18px rgba(255,214,0,.12); }
.jd-promo-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 72px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.jd-promo-thumb {
  width: 72px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a2a2a;
  color: var(--jd-yellow);
}
.jd-promo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-promo-info { min-width: 0; }
.jd-promo-info strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--jd-yellow);
  margin-bottom: 4px;
}
.jd-promo-info em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #9a9a9a;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-promo-chev { color: #777; text-align: center; transition: transform .2s; }
.jd-promo-row.open .jd-promo-chev { transform: rotate(180deg); color: var(--jd-yellow); }
.jd-promo-body { padding: 0 14px 16px; border-top: 1px solid #222; }
.jd-promo-banner {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 8px;
  margin: 14px 0 12px;
  border: 1px solid rgba(255,214,0,.2);
}
.jd-promo-cta { margin-top: 12px; }

/* Referral steps */
.jd-ref-hero .jd-ref-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 800px) {
  .jd-ref-hero .jd-ref-steps { grid-template-columns: 1fr; }
}
.jd-ref-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #101008;
  border: 1px solid #2a2a1a;
  border-radius: 8px;
  padding: 10px 12px;
}
.jd-ref-step span {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffe600, #c79a00);
  color: #1a1400;
  font-weight: 900;
  font-size: 12px;
}
.jd-ref-step p { margin: 0; font-size: 12px; color: #ccc; line-height: 1.45; }
.jd-ref-note { margin: 14px 0 0; font-size: 12px; color: #9d9d9d; line-height: 1.7; }

.jd-contact-go { margin-left: auto; color: #555; font-size: 12px; }
.jd-contact-card:hover .jd-contact-go { color: var(--jd-yellow); }
.jd-contact-notes {
  margin: 0;
  padding-left: 18px;
  color: #9d9d9d;
  font-size: 12.5px;
  line-height: 1.85;
}
.jd-profile-warn {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: #ff6b6b;
  line-height: 1.7;
}

/* Banks */
.jd-banks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (max-width: 700px) {
  .jd-banks { grid-template-columns: repeat(3, 1fr); }
}
.jd-bank {
  background: #0b2e12;
  border: 1px solid #1f6b2e;
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}
.jd-bank img {
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
}
.jd-bank .st {
  color: var(--jd-green);
  font-weight: 900;
  font-size: 10px;
  text-transform: uppercase;
}

/* SEO */
.jd-seo {
  padding: 16px 14px 24px;
  color: #ddd;
  font-size: 13px;
  line-height: 1.65;
  background: #050505;
  border-top: 1px solid #222;
}
.jd-seo h2, .jd-seo h3 {
  color: var(--jd-gold);
  font-size: 15px;
  margin: 14px 0 8px;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255,215,0,.3);
}
.jd-seo p { margin: 0 0 10px; }
.jd-seo strong { color: var(--jd-yellow); }

.jd-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  background: #000;
}
.jd-contacts a {
  background: #0b2e12;
  border: 1px solid var(--jd-green);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.jd-footer {
  text-align: center;
  color: #888;
  font-size: 11px;
  padding: 12px;
  border-top: 1px solid #1a1a1a;
  background: #000;
}

/* Page content (non-home) */
.jd-page {
  padding: 16px 18px 24px;
  color: #fff;
  background: #050505;
  min-height: 420px;
}
.jd-page-native {
  background: transparent;
  padding: 12px 14px 20px;
}
.jd-page .header-mobile,
.jd-page .footer-mobile,
.jd-page .header,
.jd-page .header__mid,
.jd-page #jd-mobile-shell { display: none !important; }
.jd-page img { max-width: 100%; height: auto; }

/* Lobby games — banner rapat + grid responsif desktop */
.jd-page #lobbyGamesApp .lg-slider {
  margin: 6px auto 8px !important;
  padding: 0 10px !important;
}
.jd-page #lobbyGamesApp .lg-banner-wrap {
  height: auto !important;
  aspect-ratio: 21 / 7 !important;
  max-height: 180px !important;
  overflow: hidden !important;
}
.jd-page #lobbyGamesApp .lg-banner-wrap img.lg-banner-provider {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  position: absolute !important;
  inset: 0 !important;
}
.jd-page #lobbyGamesApp .lg-slides > img {
  height: clamp(120px, 14vw, 180px) !important;
  object-fit: cover !important;
  object-position: center top !important;
}
.jd-page #lobbyGamesApp .lg-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 12px 10px 28px !important;
  /* Scroll sendiri — banner lebih pendek → sisakan lebih banyak ruang grid */
  max-height: calc(100vh - 210px);
  min-height: 280px;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c79a00 #111;
}
.jd-page #lobbyGamesApp .lg-grid::-webkit-scrollbar {
  width: 10px;
}
.jd-page #lobbyGamesApp .lg-grid::-webkit-scrollbar-track {
  background: #111;
  border-radius: 8px;
}
.jd-page #lobbyGamesApp .lg-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffe600, #c79a00);
  border-radius: 8px;
  border: 2px solid #111;
}
.jd-page #lobbyGamesApp .lg-grid::-webkit-scrollbar-thumb:hover {
  background: #ffe600;
}
@media (max-width: 1100px) {
  .jd-page #lobbyGamesApp .lg-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 900px) {
  .jd-page #lobbyGamesApp .lg-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .jd-page #lobbyGamesApp .lg-banner-wrap {
    max-height: 140px !important;
  }
}
@media (min-width: 1280px) {
  .jd-page #lobbyGamesApp .lg-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .jd-page #lobbyGamesApp .lg-banner-wrap {
    max-height: 200px !important;
  }
}
.jd-page #lobbyGamesApp .lg-game {
  padding: 6px !important;
  border-radius: 10px;
  border: 1px solid #222;
  background: #0a0a0a !important;
}
.jd-page #lobbyGamesApp .lg-game img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 8px 8px 0 0 !important;
}
.jd-page #lobbyGamesApp .lg-game a.lg-play {
  font-size: 11px !important;
  padding: 8px 6px !important;
  border-radius: 0 0 8px 8px !important;
}
.jd-page #lobbyGamesApp {
  max-width: 100%;
}
.jd-page #lobbyGamesApp .lg-body {
  max-width: 100%;
}

/* Desktop gamelist — search bar */
.jd-page #lobbyGamesApp .lg-desk-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 10px 8px;
  padding: 0 14px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 214, 0, .35);
  background: linear-gradient(180deg, #141208, #0a0a0a);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 0, .06);
}
.jd-page #lobbyGamesApp .lg-desk-search .fa-search {
  color: var(--jd-yellow, #ffe600);
  font-size: 15px;
  flex: 0 0 auto;
}
.jd-page #lobbyGamesApp .lg-desk-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.jd-page #lobbyGamesApp .lg-desk-search input::placeholder {
  color: #888;
  font-weight: 500;
}
.jd-page #lobbyGamesApp .lg-desk-search-clear {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #222;
  color: #ccc;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.jd-page #lobbyGamesApp .lg-desk-search-clear:hover {
  background: #333;
  color: #fff;
}
.jd-page #lobbyGamesApp .lg-desk-search-meta {
  margin: 0 12px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #bdbdbd;
}
.jd-page #lobbyGamesApp .lg-game.is-hidden {
  display: none !important;
}

/* Polish embedded mobile templates on desktop */
.jd-page #main-route,
.jd-page .main-content,
.jd-page main {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}
.jd-page .jd-reg-page {
  max-width: 720px !important;
}
.jd-page input[type="text"],
.jd-page input[type="password"],
.jd-page input[type="email"],
.jd-page input[type="number"],
.jd-page input[type="tel"],
.jd-page select,
.jd-page textarea {
  max-width: 100%;
}
.jd-page .wrapper,
.jd-page .card,
.jd-page .content-box {
  max-width: 100%;
}
.jd-page table {
  width: 100%;
  color: #eee;
}
.jd-page a { color: var(--jd-yellow); }

/* Embedded cashier / withdraw / transaksi — rapikan di chrome desktop */
.jd-page .page-wrapper,
.jd-page .jd-cashier,
.jd-page .transaksi-formulir,
.jd-page .transaksi-form,
.jd-page .wd-box {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 10px !important;
}
.jd-page .jd-cashier {
  min-height: 0 !important;
  background: transparent !important;
  padding: 8px 4px 20px !important;
}
.jd-page .page-wrapper {
  min-height: 0 !important;
  background: transparent !important;
  padding: 8px 4px 20px !important;
}
.jd-page table.table {
  background: #0a0a0a;
  border: 1px solid #242424;
  border-radius: 8px;
  overflow: hidden;
}
.jd-page table.table th {
  background: #15140c !important;
  color: var(--jd-yellow) !important;
  border-color: #2a2614 !important;
}
.jd-page table.table td {
  border-color: #1a1a1a !important;
  color: #ddd !important;
}
.jd-page .form-control,
.jd-page input.form-control,
.jd-page select.form-control {
  background: #111 !important;
  border: 1px solid #333 !important;
  color: #fff !important;
  border-radius: 6px !important;
  height: 40px;
}
.jd-page .btn-custom-sm,
.jd-page .btn-submit,
.jd-page button[type=submit] {
  border-radius: 6px !important;
}

.swal2-container { z-index: 200000 !important; }

/* Livechat float */
.jd-chat-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2ee05a, #0a8f2e);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 20px rgba(30,200,80,.55);
}
.jd-chat-float:hover { color: #fff !important; filter: brightness(1.08); }

/* ==========================================================================
   Desktop page kit — dipakai semua halaman native di desktop/includes/pages
   ========================================================================== */
.jd-dp {
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  padding: 4px 2px 18px;
}
.jd-dp a { color: var(--jd-yellow); text-decoration: none; }
.jd-dp a:hover { text-decoration: underline; }

.jd-dp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid #1e1e1e;
}
.jd-dp-head h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .4px;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  padding-left: 14px;
}
.jd-dp-head h1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 5px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--jd-yellow), #b58900);
}
.jd-dp-head h1 em { font-style: normal; color: var(--jd-yellow); }
.jd-dp-head .jd-dp-sub {
  margin: 6px 0 0 14px;
  font-size: 12px;
  color: #9a9a9a;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}
.jd-dp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.jd-dp-card {
  background: linear-gradient(180deg, #0d0d0d, #070707);
  border: 1px solid #262626;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.jd-dp-card.gold { border-color: rgba(255, 214, 0, .32); }
.jd-dp-card > h2,
.jd-dp-card-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--jd-yellow);
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jd-dp-card-title .fa { font-size: 13px; }

.jd-dp-grid { display: grid; gap: 14px; }
.jd-dp-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-dp-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-dp-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .jd-dp-grid.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .jd-dp-grid.c3,
  .jd-dp-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Statistik ringkas */
.jd-dp-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.jd-dp-stat {
  background: #0b0b0b;
  border: 1px solid #242424;
  border-left: 3px solid var(--jd-yellow);
  border-radius: 8px;
  padding: 10px 12px;
}
.jd-dp-stat .lbl { display: block; font-size: 10px; color: #8c8c8c; text-transform: uppercase; letter-spacing: .6px; }
.jd-dp-stat .val { display: block; font-size: 17px; font-weight: 800; color: #fff; margin-top: 3px; }
.jd-dp-stat .val.yellow { color: var(--jd-yellow); }
.jd-dp-stat .val.green { color: #46e06a; }
.jd-dp-stat .val.red { color: #ff5f52; }
@media (max-width: 860px) { .jd-dp-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Tabel */
.jd-dp-tablewrap { overflow-x: auto; border-radius: 8px; border: 1px solid #242424; }
table.jd-dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: #080808;
  margin: 0;
}
table.jd-dp-table thead th {
  background: linear-gradient(180deg, #1c1a10, #121108);
  color: var(--jd-yellow);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid #2e2a14;
  white-space: nowrap;
}
table.jd-dp-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #191919;
  color: #ddd;
  vertical-align: middle;
}
table.jd-dp-table tbody tr:nth-child(even) { background: #0c0c0c; }
table.jd-dp-table tbody tr:hover { background: #14140c; }
table.jd-dp-table tbody tr:last-child td { border-bottom: 0; }
table.jd-dp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.jd-dp-table .cen { text-align: center; }
table.jd-dp-table .muted { color: #7d7d7d; }

.jd-dp-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid transparent;
}
.jd-dp-pill.ok { background: rgba(24,196,58,.12); color: #46e06a; border-color: rgba(24,196,58,.35); }
.jd-dp-pill.wait { background: rgba(255,170,0,.12); color: #ffb52e; border-color: rgba(255,170,0,.35); }
.jd-dp-pill.bad { background: rgba(255,60,60,.12); color: #ff6b6b; border-color: rgba(255,60,60,.35); }
.jd-dp-pill.info { background: rgba(0,170,255,.12); color: #4cc9ff; border-color: rgba(0,170,255,.35); }

/* Tombol */
.jd-dp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  cursor: pointer;
  text-decoration: none !important;
  background: linear-gradient(180deg, #2a2a2a, #141414);
  color: #eee !important;
  border: 1px solid #333;
  transition: filter .15s ease;
}
.jd-dp-btn:hover { filter: brightness(1.18); }
.jd-dp-btn.gold {
  background: linear-gradient(180deg, #ffe600, #c79a00);
  color: #1a1400 !important;
  border-color: #a37f00;
}
.jd-dp-btn.green {
  background: linear-gradient(180deg, #35e35d, #0e9a2d);
  color: #04250c !important;
  border-color: #0c7a24;
}
.jd-dp-btn.sm { height: 28px; padding: 0 12px; font-size: 11px; }

.jd-dp-empty {
  padding: 34px 16px;
  text-align: center;
  color: #7a7a7a;
  font-size: 13px;
}
.jd-dp-empty .fa { display: block; font-size: 30px; margin-bottom: 10px; color: #333; }

/* Dokumen / artikel panjang */
.jd-dp-doc { color: #cfcfcf; font-size: 13.5px; line-height: 1.85; }
.jd-dp-doc h2 {
  margin: 26px 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--jd-yellow);
}
.jd-dp-doc h2:first-child { margin-top: 0; }
.jd-dp-doc h3 { margin: 20px 0 8px; font-size: 14px; font-weight: 800; color: #fff; }
.jd-dp-doc p { margin: 0 0 12px; }
.jd-dp-doc strong { color: #fff; }
.jd-dp-doc ol, .jd-dp-doc ul { margin: 0 0 14px; padding-left: 20px; }
.jd-dp-doc li { margin-bottom: 7px; }
.jd-dp-doc ol li::marker { color: var(--jd-yellow); font-weight: 800; }

/* Baris label → nilai */
.jd-dp-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 13px; }
.jd-dp-kv dt { color: #8f8f8f; margin: 0; }
.jd-dp-kv dd { margin: 0; color: #fff; font-weight: 700; }

/* Form field */
.jd-dp-field { margin-bottom: 14px; }
.jd-dp-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #ddd;
}
.jd-dp-field input,
.jd-dp-field select,
.jd-dp-field textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 13px;
  outline: none;
}
.jd-dp-field input:focus,
.jd-dp-field select:focus { border-color: var(--jd-yellow); }

/* Copy box (referral) */
.jd-dp-copy { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.jd-dp-copy input {
  flex: 1 1 320px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #3a3a20;
  border-radius: 6px;
  background: #121208;
  color: var(--jd-yellow);
  font-size: 13px;
  font-weight: 700;
}

/* Kartu promo */
.jd-promo-card {
  background: #0b0b0b;
  border: 1px solid rgba(255,214,0,.28);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.jd-promo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(255,214,0,.14); }
.jd-promo-card .thumb {
  aspect-ratio: 16 / 9;
  background: #000 center/cover no-repeat;
  border-bottom: 1px solid rgba(255,214,0,.2);
}
.jd-promo-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jd-promo-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.jd-promo-card .body h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--jd-yellow);
  line-height: 1.35;
}
.jd-promo-card .body .excerpt {
  font-size: 12px;
  color: #9d9d9d;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jd-promo-card .body .jd-dp-btn { margin-top: auto; align-self: flex-start; }
.jd-promo-detail img { max-width: 100%; height: auto; border-radius: 8px; }

/* Kartu provider / RTP — tinggi seragam, gambar stretch penuh */
.jd-prov-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #191919, #0a0a0a);
  border: 1px solid #2c2c2c;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease;
}
.jd-prov-card:hover { transform: translateY(-3px); border-color: var(--jd-yellow); }
.jd-prov-card .pic {
  flex: 0 0 120px;
  height: 120px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: linear-gradient(180deg, #ffe600 0%, #ffb400 100%);
  overflow: hidden;
}
.jd-prov-card .pic img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  display: block;
}
.jd-prov-card .pic .fallback {
  color: #1a1400;
  font-weight: 900;
  font-size: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jd-prov-card .meta {
  padding: 10px 10px 12px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.jd-prov-card .meta .jd-dp-btn { margin-top: auto; }
.jd-prov-card .meta .nm {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jd-prov-card .badge-maint {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  background: rgba(0,0,0,.82);
  color: #ffdd57;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .4px;
}
.jd-prov-card .rtp {
  display: block;
  font-size: 11px;
  color: #46e06a;
  font-weight: 800;
  margin-bottom: 8px;
}
.jd-prov-card .rtp-bar {
  height: 5px;
  border-radius: 4px;
  background: #232323;
  overflow: hidden;
  margin: 0 0 9px;
}
.jd-prov-card .rtp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffb400, #46e06a);
}

/* Kartu kontak */
.jd-contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(120deg, #101010, #060606);
  border: 1px solid #2a2a2a;
  transition: border-color .18s ease, transform .18s ease;
}
.jd-contact-card:hover { border-color: var(--jd-yellow); transform: translateY(-2px); text-decoration: none !important; }
.jd-contact-card .ico {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #1a1400;
  background: linear-gradient(180deg, #ffe600, #c79a00);
}
.jd-contact-card .txt strong { display: block; font-size: 13.5px; color: #fff; margin-bottom: 3px; }
.jd-contact-card .txt span { font-size: 11.5px; color: #8f8f8f; line-height: 1.5; }
.jd-contact-card .txt { flex: 1; min-width: 0; }

/* Pagination sederhana */
.jd-dp-pager { display: flex; gap: 6px; justify-content: center; padding: 14px 0 2px; flex-wrap: wrap; }
.jd-dp-pager a, .jd-dp-pager span {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #2a2a2a;
  background: #0d0d0d;
  color: #bbb !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
}
.jd-dp-pager a:hover { border-color: var(--jd-yellow); color: #fff !important; }
.jd-dp-pager .cur { background: linear-gradient(180deg, #ffe600, #c79a00); color: #1a1400 !important; border-color: #a37f00; }
.jd-dp-pager .off { opacity: .38; pointer-events: none; }

/* ==========================================================================
   Desktop Deposit (cashier)
   ========================================================================== */
.jd-cashier-desk .jd-dep-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.jd-dep-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid rgba(255, 214, 0, .35);
  background: #0d0d0d;
  color: #ffd700;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.jd-dep-tab:hover { border-color: var(--jd-yellow); }
.jd-dep-tab.active {
  background: linear-gradient(180deg, #ffe600, #c79a00);
  color: #1a1400;
  border-color: #a37f00;
}
.jd-dep-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .9fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px) {
  .jd-dep-layout { grid-template-columns: 1fr; }
}
.jd-dep-pane { display: none; }
.jd-dep-pane.active { display: block; }
.jd-dep-info {
  background: rgba(255, 214, 0, .08);
  border: 1px solid rgba(255, 214, 0, .28);
  color: #ffe08a;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.jd-dep-instant {
  text-align: center;
  padding: 18px 10px 8px;
}
.jd-dep-instant p {
  margin: 0 0 14px;
  color: #bbb;
  font-size: 13px;
}
.jd-dep-instant-btn {
  min-width: 240px;
  height: 48px !important;
  font-size: 14px !important;
}
.jd-dep-steps,
.jd-dep-guide {
  margin: 16px 0 0;
  padding-left: 18px;
  color: #bdbdbd;
  font-size: 12.5px;
  line-height: 1.7;
}
.jd-dep-steps li,
.jd-dep-guide li { margin-bottom: 6px; }
.jd-dep-steps li::marker,
.jd-dep-guide li::marker { color: var(--jd-yellow); font-weight: 800; }
.jd-dep-bank {
  background: #101010;
  border: 1px dashed rgba(255, 214, 0, .4);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
}
.jd-dep-bank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
}
.jd-dep-bank-row span { color: #9a9a9a; }
.jd-dep-bank-row strong { color: #fff; font-weight: 800; text-align: right; }
.jd-dep-bank-row strong.green { color: #46e06a; }
.jd-dep-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: #888;
}
.jd-dep-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 4px 0 16px;
}
@media (max-width: 860px) {
  .jd-dep-form-grid { grid-template-columns: 1fr !important; }
}
.jd-dep-chip {
  height: 36px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #151515;
  color: #eee;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.jd-dep-chip:hover,
.jd-dep-chip.active {
  background: rgba(255, 214, 0, .16);
  border-color: var(--jd-yellow);
  color: var(--jd-yellow);
}
.jd-dep-submit {
  width: 100%;
  height: 46px !important;
  font-size: 14px !important;
}
.jd-dep-qrmanual {
  text-align: center;
  margin: 0 0 18px;
}
.jd-dep-qrmanual img {
  max-width: 220px;
  width: 100%;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  display: block;
  margin: 0 auto 10px;
}
.jd-dep-qrmanual-name {
  font-weight: 800;
  color: var(--jd-yellow);
  margin-bottom: 10px;
}
.jd-dep-banks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.jd-dep-banklogo {
  background: #fff;
  border-radius: 6px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
}
.jd-dep-banklogo img {
  max-height: 20px;
  width: 100%;
  object-fit: contain;
}
.jd-cashier-desk .jd-dp-field input[type="file"] {
  height: auto;
  padding: 8px 10px;
  line-height: 1.3;
}

/* QRIS Instant modal — selalu di atas chrome desktop */
#qrisOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .85);
  padding: 16px;
  box-sizing: border-box;
}
#qrisOverlay.open { display: flex !important; }
#qrisOverlay .qi-card {
  width: min(440px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
  background: radial-gradient(900px 520px at 20% -20%, rgba(255, 180, 0, .18), transparent 60%), #0b1220;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 70px rgba(0, 0, 0, .55);
}
#qrisOverlay .qi-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(11, 18, 32, .98);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
#qrisOverlay .qi-title { color: #fff; font-weight: 900; font-size: 16px; }
#qrisOverlay .qi-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
#qrisOverlay .qi-body { padding: 16px; }
.qi-amt-wrap { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.qi-ccy { color: rgba(255, 255, 255, .75); font-weight: 800; min-width: 48px; text-align: center; }
#qi_amount {
  width: 100%;
  height: 52px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
}
.qi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.qi-chip {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #fff;
  border-radius: 12px;
  padding: 11px 8px;
  text-align: center;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
}
.qi-chip.active,
.qi-chip:hover {
  background: rgba(255, 180, 0, .22);
  border-color: #ffb400;
  color: #ffb400;
}
.qi-bonus-wrap { margin-bottom: 14px; }
.qi-bonus-label {
  color: rgba(255, 255, 255, .75);
  font-weight: 800;
  font-size: 12px;
  margin-bottom: 6px;
}
.qi-bonus-wrap select {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  padding: 0 12px;
  outline: none;
  box-sizing: border-box;
}
.qi-bonus-wrap select option { background: #0b1220; color: #fff; }
.qi-btn {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 16px;
  color: #111;
  background: linear-gradient(90deg, #ffb400, #feef00);
  cursor: pointer;
}
.qi-btn[disabled] { opacity: .6; cursor: not-allowed; }
.qi-min {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  text-align: center;
  font-weight: 700;
}
.qi-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, .15);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #fecaca;
  font-size: 13px;
  line-height: 1.45;
}
.qi-hidden { display: none !important; }
.qi-note {
  margin-top: 10px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.5;
}
#qrisOverlay .qi-qr { text-align: center; color: #fff; }
#qrisOverlay .qi-qr img {
  max-width: min(280px, 78vw);
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
}
#qrisOverlay .qi-status { margin-top: 14px; font-size: 14px; font-weight: 800; color: #fff; }
#qrisOverlay .qi-sub { margin-top: 6px; font-size: 22px; font-weight: 900; color: #ff4d4d; line-height: 1.3; }
#qrisOverlay .qi-meta {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.7;
}
#qrisOverlay .qi-meta strong { color: #ffb400; }
#qrisOverlay .qi-cancel-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: #c0392b;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.qi-back-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* ==========================================================================
   Desktop Togel Hub / Bet
   ========================================================================== */
.jd-togel-desk .jd-togel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: -4px 0 14px;
  padding: 10px 14px;
  background: #0b0b0b;
  border: 1px solid #242424;
  border-radius: 8px;
  color: #cfcfcf;
  font-size: 12.5px;
  font-weight: 600;
}
.jd-togel-desk .jd-togel-meta .fa {
  color: var(--jd-yellow);
  margin-right: 4px;
}
.jd-togel-desk .jd-togel-note {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 191, 39, .08);
  border: 1px solid rgba(255, 191, 39, .28);
  color: #ffbf27;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
}
/* Jenis Permainan — iframe visual dari 7.redchat.shop / menu-games-bg.jpg */
.jd-togel-desk .togel-menu-frame-wrap {
  width: 100%;
  margin: .25rem 0 .5rem;
  overflow: hidden;
  background: transparent;
}
.jd-togel-desk .togel-menu-frame {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border: 0;
  background: transparent;
  height: calc(720px * 1536 / 1426);
  min-height: 420px;
}
.jd-togel-bet-card {
  overflow: visible;
}
.jd-togel-desk .togel-play-page {
  padding: 0 !important;
  margin: 0 auto !important;
  border: none !important;
  background: transparent !important;
  max-width: 900px;
}
.jd-togel-desk .togel-play-page.hub-embed {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
.jd-togel-desk .jd-shell {
  background: #000 !important;
  border: 3px solid #feef00 !important;
  border-radius: 4px !important;
  padding: 12px 10px 14px !important;
  margin: 0 0 8px !important;
  box-sizing: border-box !important;
}
.jd-togel-desk .jd-panel {
  padding: 10px 8px 14px !important;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.jd-togel-desk .m4-title {
  font-size: var(--tu-title-size, 18px) !important;
  margin: 0 2px 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-weight: 400 !important;
  line-height: 1.3;
}
.jd-togel-desk .m4-toolbar {
  margin: 0 2px 12px !important;
}
.jd-togel-desk .m4-baris {
  font-size: 14px !important;
}
.jd-togel-desk .m4-baris select {
  min-width: 64px;
  height: 32px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.jd-togel-desk .m4-total {
  font-size: 15px !important;
  color: var(--tu-total-color, #feef00) !important;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .3);
  border-radius: 6px;
  padding: 5px 12px;
}
.jd-togel-desk .m4-tabs {
  gap: 6px !important;
  margin-bottom: 0 !important;
}
.jd-togel-desk .m4-tabs .m4-tab,
.jd-togel-desk button.m4-tab {
  padding: var(--tu-tab-pad-y, 10px) 8px !important;
  font-size: var(--tu-tab-font, 11px) !important;
  font-weight: var(--tu-tab-weight, 900) !important;
  letter-spacing: var(--tu-tab-letter, .02em) !important;
  -webkit-text-stroke: var(--tu-tab-stroke, .65px) currentColor !important;
  paint-order: stroke fill !important;
  border-radius: 6px 6px 0 0 !important;
}
.jd-togel-desk .m4-table-wrap {
  border-radius: 0 0 8px 8px !important;
  border-width: var(--tu-discount-border-w, 2px) !important;
  border-style: solid !important;
}
.jd-togel-desk .togel-play-page[data-bet-mode="DISCOUNT"] .m4-table-wrap {
  border-width: var(--tu-discount-border-w, 2px) !important;
}
.jd-togel-desk .togel-play-page[data-bet-mode="BET FULL"] .m4-table-wrap {
  border-width: var(--tu-full-border-w, 2px) !important;
}
.jd-togel-desk .togel-play-page[data-bet-mode="BET BB"] .m4-table-wrap {
  border-width: var(--tu-bb-border-w, 2px) !important;
}
.jd-togel-desk .togel-play-page[data-bet-mode="PRIZE123"] .m4-table-wrap,
.jd-togel-desk .togel-play-page[data-bet-mode="S. DISCOUNT"] .m4-table-wrap {
  border-width: var(--tu-prize-border-w, 2px) !important;
}
.jd-togel-desk .m4-table {
  min-width: var(--tu-table-min, 280px) !important;
  width: 100% !important;
  font-size: var(--tu-table-font, 11px) !important;
}
.jd-togel-desk .m4-table th {
  padding: var(--tu-cell-pad-y, 6px) var(--tu-cell-pad-x, 4px) !important;
  font-size: var(--tu-th-font, var(--tu-table-font, 11px)) !important;
  font-weight: var(--tu-th-weight, 800) !important;
  -webkit-text-stroke: var(--tu-th-stroke, .45px) currentColor !important;
  paint-order: stroke fill !important;
}
.jd-togel-desk .m4-table td {
  padding: var(--tu-cell-pad-y, 6px) var(--tu-cell-pad-x, 4px) !important;
}
.jd-togel-desk .m4-table .col-no { width: 42px !important; }
.jd-togel-desk .m4-table .col-num { width: var(--tu-col-num, 88px) !important; }
.jd-togel-desk .m4-table .col-bb { width: var(--tu-col-bb, 32px) !important; }
.jd-togel-desk .m4-table .col-amt-head,
.jd-togel-desk .m4-table .col-amt-single { width: var(--tu-col-amt, 102px) !important; }
.jd-togel-desk .m4-table .number-input,
.jd-togel-desk .m4-table .nomor-field,
.jd-togel-desk .m4-table .choice-select.nomor-field {
  font-size: var(--tu-num-font, 13px) !important;
  font-family: var(--tu-num-font-family, inherit) !important;
  border-radius: var(--tu-num-radius, 8px) !important;
  border-width: var(--tu-num-border-w, 1px) !important;
  border-style: solid !important;
  padding: var(--tu-num-pad-y, 8px) var(--tu-num-pad-x, 10px) !important;
  border-color: var(--tu-num-border, #c5c5c5) !important;
  background: var(--tu-num-bg, #fff) !important;
  color: var(--tu-num-text, #111) !important;
  text-align: var(--tu-num-align, left) !important;
}
.jd-togel-desk .m4-table .number-input::placeholder,
.jd-togel-desk .m4-table .nomor-field::placeholder {
  color: var(--tu-num-ph-color, #999) !important;
  font-size: var(--tu-num-ph-size, 12px) !important;
  opacity: 1 !important;
}
.jd-togel-desk .m4-table .number-input:focus {
  background: var(--tu-num-bg, #fff) !important;
  color: var(--tu-num-text, #111) !important;
  border-color: var(--tu-amt-focus-border, #feef00) !important;
}
.jd-togel-desk .m4-table .amt {
  font-size: var(--tu-amt-font, 11px) !important;
  font-family: var(--tu-amt-font-family, inherit) !important;
  padding: var(--tu-amt-pad-y, 8px) var(--tu-amt-pad-x, 4px) !important;
  border-radius: var(--tu-amt-radius, 999px) !important;
  border-width: var(--tu-amt-border-w, 2px) !important;
  border-style: solid !important;
  border-color: var(--tu-amt-border, #d4af37) !important;
  color: var(--tu-amt-text, #fff) !important;
  text-align: var(--tu-amt-align, center) !important;
}
.jd-togel-desk .m4-table .amt::placeholder {
  color: var(--tu-amt-ph-color, #dce6eb) !important;
  font-size: var(--tu-amt-ph-size, 10px) !important;
  opacity: 1 !important;
}
.jd-togel-desk .m4-table .amt {
  background: var(--tu-discount-amt-off, #5a7888) !important;
  color: rgba(255,255,255,.75) !important;
}
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly]),
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly]):focus,
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly]).is-active {
  background: var(--tu-amt-active-bg, #fff) !important;
  color: var(--tu-amt-active-text, #111) !important;
}
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly])::placeholder,
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly]):focus::placeholder,
.jd-togel-desk .m4-table .amt:not(.amt-off):not([readonly]).is-active::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  -webkit-text-fill-color: transparent !important;
}
.jd-togel-desk .m4-table .amt.amt-off,
.jd-togel-desk .m4-table .amt[readonly] {
  background: var(--tu-discount-amt-off, #5a7888) !important;
  color: rgba(255,255,255,.65) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
.jd-togel-desk .m4-table .amt.amt-off::placeholder,
.jd-togel-desk .m4-table .amt[readonly]::placeholder {
  color: var(--tu-amt-ph-color, #dce6eb) !important;
  font-size: var(--tu-amt-ph-size, 10px) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--tu-amt-ph-color, #dce6eb) !important;
}
.jd-togel-desk .auto-bet-btn {
  height: 34px;
  font-size: 12px !important;
}
.jd-togel-desk .m4-table .bb-check,
.jd-togel-desk .m4-table .bb-all-check {
  width: var(--tu-bb-size, 18px) !important;
  height: var(--tu-bb-size, 18px) !important;
  accent-color: var(--tu-accent, #feef00);
}
.jd-togel-desk .bet-actions {
  margin-top: 18px !important;
  gap: 12px !important;
}
.jd-togel-desk .bet-actions button {
  min-width: 140px !important;
  padding: 13px 28px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}
.jd-togel-desk .btn-submit-bets {
  background: linear-gradient(to bottom, var(--tu-btn-submit-from, #e53935), var(--tu-btn-submit-to, #b71c1c)) !important;
}
.jd-togel-desk .btn-clear-bets {
  background: var(--tu-btn-clear, #5a5a5a) !important;
}
.jd-togel-desk .jd-box {
  border-radius: var(--tu-jd-radius, 2px) !important;
  background: var(--tu-jd-bg, #467487) !important;
  border-color: var(--tu-jd-border, #7ec8e3) !important;
}
.jd-togel-desk .jd-digit-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: var(--tu-jd-gap-row, 10px) var(--tu-jd-gap-col, 8px) !important;
  padding: 16px !important;
}
.jd-togel-desk .jd-digit-label {
  font-size: var(--tu-jd-label, 14px) !important;
}
.jd-togel-desk .jd-pill,
.jd-togel-desk .jd-pill-sm {
  border-radius: var(--tu-pill-radius, 7px) !important;
  padding: var(--tu-pill-pad-y, 9px) var(--tu-pill-pad-x, 8px) !important;
  font-size: var(--tu-pill-font, 12px) !important;
}
.jd-togel-desk .jd-beli-bar {
  background: var(--tu-beli-bar, #2f4552) !important;
}
.jd-togel-desk .jd-shio-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
.jd-togel-desk .bet-detail-panel {
  margin-top: 20px !important;
}
.jd-togel-desk .jd-dp-stat .val.red { color: #ff6b6b; }