:root{
  --ve-bg:#121212;
  --ve-card:#1a1a1a;
  --ve-text:#fff;
  --ve-sub:#bbb;
  --ve-accent:#d33;
  --ve-muted:#2a2a2a;
  --ve-gold:#a67c00;
  --ve-silver:#7f8c8d;
  --ve-bronze:#8d5a2b;
}
.ve-card{background:var(--ve-card);color:var(--ve-text);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.35);padding:24px;margin:16px auto;max-width:900px}
.ve-center{text-align:center}
.ve-track-pills{display:flex;gap:12px;justify-content:center;margin-bottom:16px}
.ve-pill{padding:10px 18px;border-radius:999px;border:2px solid var(--ve-accent);background:transparent;color:#fff;cursor:pointer}
.ve-pill.active,.ve-btn.primary{background:var(--ve-accent);color:#fff;border:2px solid var(--ve-accent)}
.ve-pill-outline{padding:8px 14px;border-radius:999px;border:2px dashed var(--ve-accent);color:#fff;display:none}
.ve-goal{margin-top:8px}
#ve-goal-slider{width:100%}
.ve-goal-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ve-sub)}
.ve-points-preview{margin-top:6px;color:#fff}
.ve-buttons{display:flex;gap:12px;justify-content:center;margin:16px 0}
.ve-btn{padding:10px 16px;border-radius:999px;border:2px solid var(--ve-accent);background:#222;color:#fff;cursor:pointer}
.ve-btn.success{background:var(--ve-accent)}
.ve-btn.danger{border-color:#a00;background:#3a0000}
.ve-btn:disabled{opacity:.5;cursor:not-allowed;background:#444;border-color:#555}
.ve-reset{margin-bottom:10px}
.ve-countdown .ve-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.ve-countdown .num{font-size:42px;font-weight:800}
.ve-countdown .lab{color:var(--ve-sub)}
.ve-left{margin-top:8px;color:var(--ve-sub);font-size:14px}
.ve-modal{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;z-index:9999}
.ve-modal.hidden{display:none}
.ve-modal-content{background:#111;border:1px solid #333;border-radius:16px;padding:24px;max-width:520px;width:90%;text-align:center}
.ve-confetti{position:fixed;inset:0;pointer-events:none;z-index:9998}
.ve-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ve-stat{background:#0f0f0f;border:1px solid #333;border-radius:16px;padding:14px}
.ve-stat .num{font-size:36px;font-weight:800}
.ve-pending{margin-top:10px;color:var(--ve-sub)}
.ve-badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}
.ve-badge{background:#0f0f0f;border:1px solid #333;border-radius:14px;padding:10px}
.ve-badge img{max-width:100%;border-radius:10px}
.ve-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.ve-table th,.ve-table td{padding:10px;background:#0f0f0f;border-bottom:1px solid #222}
.ve-table tr.highlight-1 td{background:linear-gradient(90deg,rgba(166,124,0,.2),#0f0f0f)}
.ve-table tr.highlight-2 td{background:linear-gradient(90deg,rgba(127,140,141,.2),#0f0f0f)}
.ve-table tr.highlight-3 td{background:linear-gradient(90deg,rgba(141,90,43,.2),#0f0f0f)}
.ve-toolbar{display:flex;gap:10px;margin-bottom:10px}
.ve-search{width:100%;max-width:360px;padding:10px;border-radius:10px;border:1px solid #333;background:#0f0f0f;color:#fff}
@media (max-width:760px){
 .ve-stats-row{grid-template-columns:1fr 1fr}
 .ve-countdown .ve-grid{grid-template-columns:repeat(2,1fr)}
}

.ve-milestones-grid{display:flex;gap:12px;margin-top:16px}
.ve-milestone-card{display:flex;align-items:stretch;gap:14px;background:#0f0f0f;border:1px solid #333;border-radius:14px;padding:12px}
.ve-milestone-card.achieved{border-color:var(--ve-accent)}
.ve-milestone-card .img-wrap{flex:0 0 64px}
.ve-milestone-card .img-wrap img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.ve-milestone-card .content{flex:1 1 auto}
.ve-milestone-card .content .title{font-weight:600;margin-bottom:4px}
.ve-milestone-card .content .desc{font-size:13px;color:#ccc;margin-bottom:4px}
.ve-milestone-card .content .auto-prize{font-size:12px;color:#f5f5f5;opacity:.9}
.ve-milestone-card .right{flex:0 0 140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.ve-milestone-card .remaining{font-size:12px;color:#ddd}
.ve-milestone-circle{width:80px;height:80px}
.ve-milestone-circle .bg{fill:none;stroke:#333;stroke-width:3.5}
.ve-milestone-circle .fg{fill:none;stroke:var(--ve-accent);stroke-width:3.5;stroke-linecap:round;transition:stroke-dashoffset .4s ease}
.ve-milestone-circle .pct{fill:#fff;font-size:10px}
@media (max-width:600px){
  .ve-milestone-card{flex-direction:column;align-items:flex-start}
  .ve-milestone-card .right{align-items:flex-start}
}

.ve-badge-effect{margin-top:6px;font-size:12px;color:#ccc}


.ve-lb-badges{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:flex-start;
}
.ve-lb-badge img{
  width:20px;
  height:20px;
  border-radius:999px;
  object-fit:cover;
  display:block;
}
.ve-lb-badge-text{
  padding:2px 6px;
  border-radius:999px;
  border:1px solid #555;
  font-size:11px;
  color:#eee;
}

/* Unified card layout for prizes, badges, milestones */
#ve-prizes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
#ve-prizes .ve-pending{
  flex:0 0 100%;
  text-align:center;
  margin-bottom:4px;
}
#ve-prizes .ve-badge,
.ve-badges-grid .ve-badge,
.ve-milestones-grid .ve-milestone-card{
  background:#0f0f0f;
  border:1px solid #333;
  border-radius:14px;
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  flex:1 1 calc(20% - 16px); /* up to 5 items per row */
  max-width:calc(20% - 16px);
  min-width:150px;
}

/* grids for badges & milestones */
.ve-badges-grid,
.ve-milestones-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}

/* Consistent image presentation */
#ve-prizes .ve-badge img,
.ve-badges-grid .ve-badge img,
.ve-milestones-grid .ve-milestone-card .img-wrap img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  margin-bottom:8px;
}

/* Ensure milestone image wrapper fills card width */
.ve-milestones-grid .ve-milestone-card .img-wrap{
  width:100%;
}

/* Center inner texts */
#ve-prizes .ve-badge .title,
#ve-prizes .ve-badge .cost,
.ve-badges-grid .ve-badge > div,
.ve-milestones-grid .ve-milestone-card .title,
.ve-milestones-grid .ve-milestone-card .desc,
.ve-milestones-grid .ve-milestone-card .auto-prize{
  text-align:center;
}

/* Milestone progress section centered under text */
.ve-milestones-grid .ve-milestone-card .right{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.ve-milestones-grid .ve-milestone-card .remaining{
  margin-top:6px;
}

/* Keep badge effect and buttons centered */
.ve-badge-effect{
  margin-top:6px;
  font-size:12px;
  color:#ccc;
}
.ve-badges-grid .ve-badge .ve-btn,
#ve-prizes .ve-badge .ve-btn{
  margin-top:8px;
}


.ve-badge-desc{
  margin-top:4px;
  font-size:13px;
  color:#ddd;
}