/*
 * ==========================================================
 * VIBE PROGRESSION UI 2.0
 * Quests + Leaderboard + Referrals
 * ==========================================================
 */

/* VIBE_PROGRESSION_UI_V20 */

.vprog{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.vprog-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;

  gap:16px;
}


.vprog-kicker{
  color:var(--vb-accent);

  font-size:11px;
  font-weight:850;

  letter-spacing:.11em;
  text-transform:uppercase;
}


.vprog-title{
  margin-top:5px;

  color:var(--vb-text);

  font-size:
    clamp(
      27px,
      2.4vw,
      36px
    );

  font-weight:950;
  line-height:1.08;

  letter-spacing:-.045em;
}


.vprog-description{
  max-width:760px;

  margin-top:8px;

  color:var(--vb-muted);

  font-size:14px;
  line-height:1.55;
}


.vprog-date{
  min-width:170px;

  padding:12px 14px;

  border:
    1px solid
    var(--vb-border);

  border-radius:12px;

  background:
    var(--vb-surface-1);
}


.vprog-date-label{
  color:var(--vb-muted);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.06em;
}


.vprog-date-value{
  margin-top:4px;

  color:var(--vb-text);

  font-size:15px;
  font-weight:900;
}


/* ==========================================================
 * Quests
 * ========================================================== */

.vquest-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:12px;
}


.vquest-card{
  min-height:220px;
}


.vquest-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;
}


.vquest-name{
  color:var(--vb-text);

  font-size:17px;
  font-weight:900;
}


.vquest-description{
  min-height:39px;

  margin-top:5px;

  color:var(--vb-muted);

  font-size:12px;
  line-height:1.5;
}


.vquest-progress-text{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:18px;

  color:var(--vb-muted);

  font-size:12px;
}


.vquest-progress-text strong{
  color:var(--vb-text);

  font-size:13px;
}


.vquest-progress{
  height:8px;

  margin-top:7px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.055);
}


.vquest-progress > div{
  height:100%;

  border-radius:inherit;

  background:
    var(--vb-accent);

  transition:
    width
    var(--vb-motion-normal)
    var(--vb-ease);
}


.vquest-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;

  gap:8px;

  margin-top:16px;
}


.vquest-reward{
  color:var(--vb-success);

  font-size:14px;
  font-weight:900;
}


/* ==========================================================
 * Leaderboard
 * ========================================================== */

.vleader{
  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:14px;

  background:
    var(--vb-surface-1);
}


.vleader-row{
  display:grid;

  grid-template-columns:
    54px
    minmax(180px,1fr)
    110px
    150px;

  align-items:center;

  gap:12px;

  min-height:62px;

  padding:
    8px
    13px;

  border-bottom:
    1px solid
    var(--vb-border);
}


.vleader-row:last-child{
  border-bottom:0;
}


.vleader-row.is-top{
  background:
    linear-gradient(
      90deg,
      rgba(255,200,90,.05),
      transparent 55%
    );
}


.vleader-rank{
  color:var(--vb-muted);

  font-size:15px;
  font-weight:950;

  text-align:center;
}


.vleader-row.is-top .vleader-rank{
  color:var(--vb-premium);
}


.vleader-member{
  display:flex;
  align-items:center;

  gap:10px;

  min-width:0;
}


.vleader-avatar{
  width:38px;
  height:38px;

  flex:0 0 38px;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:11px;

  background:
    rgba(255,255,255,.03);

  font-size:12px;
  font-weight:900;
}


.vleader-avatar img{
  width:100%;
  height:100%;

  object-fit:cover;
}


.vleader-name{
  overflow:hidden;

  color:var(--vb-text);

  font-size:14px;
  font-weight:850;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vleader-user{
  overflow:hidden;

  margin-top:2px;

  color:var(--vb-muted);

  font-size:11px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


.vleader-level{
  color:var(--vb-muted);

  font-size:12px;
  font-weight:800;
}


.vleader-balance{
  color:var(--vb-text);

  font-size:14px;
  font-weight:950;

  text-align:right;

  font-variant-numeric:
    tabular-nums;
}


/* ==========================================================
 * Referrals
 * ========================================================== */

.vref-stats{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:10px;
}


.vref-stat-label{
  color:var(--vb-muted);

  font-size:11px;
  font-weight:800;
}


.vref-stat-value{
  margin-top:5px;

  color:var(--vb-text);

  font-size:22px;
  font-weight:950;

  font-variant-numeric:
    tabular-nums;
}


.vref-code{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:12px;
}


.vref-code-value{
  padding:
    10px
    12px;

  border:
    1px solid
    var(--vb-border);

  border-radius:10px;

  color:var(--vb-text);

  background:
    rgba(255,255,255,.018);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:15px;
  font-weight:850;

  letter-spacing:.04em;
}


.vref-explainer{
  color:var(--vb-muted);

  font-size:13px;
  line-height:1.6;
}


.vref-history{
  overflow:hidden;

  border:
    1px solid
    var(--vb-border);

  border-radius:12px;
}


.vref-row{
  display:grid;

  grid-template-columns:
    minmax(170px,1fr)
    150px
    120px
    120px;

  align-items:center;

  gap:10px;

  min-height:54px;

  padding:
    8px
    11px;

  border-bottom:
    1px solid
    var(--vb-border);
}


.vref-row:last-child{
  border-bottom:0;
}


.vref-user{
  color:var(--vb-text);

  font-size:13px;
  font-weight:850;
}


.vref-code-small{
  color:var(--vb-muted);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:11px;
}


.vref-date{
  color:var(--vb-muted);

  font-size:11px;
}


.vref-reward{
  color:var(--vb-success);

  font-size:13px;
  font-weight:900;

  text-align:right;
}


.vprog-empty{
  padding:
    34px
    15px;

  color:var(--vb-muted);

  text-align:center;

  font-size:13px;
}


@media(max-width:900px){

  .vquest-grid{
    grid-template-columns:1fr;
  }


  .vref-stats{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .vleader-row{
    grid-template-columns:
      44px
      minmax(0,1fr)
      130px;
  }


  .vleader-level{
    display:none;
  }


  .vref-row{
    grid-template-columns:
      minmax(0,1fr)
      100px;
  }


  .vref-code-small,
  .vref-date{
    display:none;
  }

}


@media(max-width:580px){

  .vref-stats{
    grid-template-columns:1fr;
  }


  .vleader-row{
    grid-template-columns:
      38px
      minmax(0,1fr)
      92px;

    padding:
      8px
      7px;
  }


  .vleader-balance{
    font-size:12px;
  }

}