.gpbb-box{
  max-width:720px;
  margin:40px auto;
  padding:26px;
  border-radius:var(--gpbb-radius, 22px);
  font-family:"Prompt", system-ui, -apple-system, Segoe UI, sans-serif;
  text-align:center;

  background:
    linear-gradient(160deg, var(--gpbb-bg1), var(--gpbb-bg2) 50%, var(--gpbb-bg3)) padding-box,
    linear-gradient(135deg, var(--gpbb-gold1), var(--gpbb-gold2), var(--gpbb-gold3)) border-box;

  border:2px solid transparent;

  box-shadow:
    0 0 calc(35px * var(--gpbb-shadow-on, 1)) rgba(200,146,46,.35),
    inset 0 0 2px rgba(255,255,255,.25);
}

.gpbb-title{
  color:var(--gpbb-title);
  font-size:28px;
  font-weight:800;
  margin-bottom:18px;
  letter-spacing:.5px;
}

.gpbb-title::after{
  content:"";
  display:block;
  height:3px;
  width:170px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gpbb-gold1), var(--gpbb-gold3), var(--gpbb-gold1), transparent);
}

.gpbb-cards{ display:flex; gap:18px; flex-wrap:wrap; }

.gpbb-card{
  flex:1;
  min-width:260px;
  padding:22px;
  border-radius:18px;

  background:
    linear-gradient(180deg, #FFF5DC 0%, #F3D9A4 100%) padding-box,
    linear-gradient(135deg, var(--gpbb-gold3), var(--gpbb-gold1)) border-box;

  border:1.5px solid transparent;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.gpbb-card h3{
  font-size:18px;
  font-weight:800;
  color:var(--gpbb-card-title);
  margin-bottom:8px;
}

.gpbb-value{
  font-size:34px;
  font-weight:900;
  color:var(--gpbb-value);
  text-shadow:0 0 10px rgba(200,146,46,.5);
}

.gpbb-update{
  margin-top:14px;
  font-size:14px;
  color:var(--gpbb-title);
}

.gpbb-credit{
  margin-top:10px;
  font-size:12px;
  color:rgba(246,210,143,.9);
  opacity:.95;
}

/* chart */
.gpbb-chart-box{
  max-width:720px;
  margin:40px auto;
  padding:24px;
  border-radius:var(--gpbb-radius, 22px);
  font-family:"Prompt", system-ui, -apple-system, Segoe UI, sans-serif;
  text-align:center;

  background:
    linear-gradient(160deg, var(--gpbb-bg1), var(--gpbb-bg2) 50%, var(--gpbb-bg3)) padding-box,
    linear-gradient(135deg, var(--gpbb-gold1), var(--gpbb-gold2), var(--gpbb-gold3)) border-box;

  border:2px solid transparent;
  box-shadow:
    0 0 calc(35px * var(--gpbb-shadow-on, 1)) rgba(200,146,46,.35),
    0 0 calc(25px * var(--gpbb-shadow-on, 1)) rgba(122,14,26,.35),
    inset 0 0 2px rgba(255,255,255,.25);

  color:#fff;
  overflow:hidden;
}

.gpbb-chart-title{
  font-size:28px;
  font-weight:800;
  color:var(--gpbb-title) !important;
  margin-bottom:18px;
  text-shadow:0 0 10px rgba(200,146,46,.5);
}

.gpbb-chart-title::after{
  content:"";
  display:block;
  height:3px;
  width:170px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--gpbb-gold1), var(--gpbb-gold3), var(--gpbb-gold1), transparent);
}

.gpbb-chart-frame{
  background:
    linear-gradient(180deg, #FFF5DC 0%, #F3D9A4 100%) padding-box,
    linear-gradient(135deg, var(--gpbb-gold3), var(--gpbb-gold1)) border-box;

  border:1.6px solid transparent;
  border-radius:18px;
  padding:8px;

  box-shadow:
    0 10px 22px rgba(0,0,0,.2),
    inset 0 0 6px rgba(200,146,46,.30);
}

.gpbb-tv{ height:325px; width:100%; }

.gpbb-chart-update{
  margin-top:14px;
  font-size:14px;
  color:var(--gpbb-title);
  text-shadow:0 0 6px rgba(0,0,0,.35);
}

.gpbb-chart-footer{
  text-align:right;
  font-size:12px;
  color:var(--gpbb-title);
  opacity:.95;
  margin-top:6px;
  text-shadow:0 0 6px rgba(0,0,0,.35);
}

@media (max-width:540px){
  .gpbb-card + .gpbb-card{ margin-top:12px; }
}