/*
 * ==========================================================
 * VIBE COMMUNITY UI 2.0
 * ==========================================================
 */

/* VIBE_COMMUNITY_UI_V20 */

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


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

  gap:16px;
}


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

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

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


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


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

  margin-top:8px;

  color:var(--vb-muted);

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


/* ==========================================================
 * Members
 * ========================================================== */

.vmembers-toolbar{
  display:grid;

  grid-template-columns:
    minmax(220px,1fr)
    210px;

  gap:9px;
}


.vmembers-grid{
  display:grid;

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

  gap:12px;
}


.vmember{
  position:relative;

  overflow:hidden;

  min-height:180px;
}


.vmember-link{
  display:block;

  color:inherit;

  text-decoration:none;
}


.vmember-top{
  display:flex;
  align-items:center;

  gap:12px;
}


.vmember-avatar{
  width:54px;
  height:54px;

  flex:0 0 54px;

  display:grid;
  place-items:center;

  overflow:hidden;

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

  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(93,183,255,.16),
      rgba(161,104,255,.13)
    );

  color:var(--vb-text);

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


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

  object-fit:cover;
}


.vmember-name{
  overflow:hidden;

  color:var(--vb-text);

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

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


.vmember-user{
  overflow:hidden;

  margin-top:3px;

  color:var(--vb-muted);

  font-size:12px;

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


.vmember-stats{
  display:grid;

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

  gap:8px;

  margin-top:15px;
}


.vmember-stat{
  padding:9px 10px;

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

  border-radius:10px;

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


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

  font-size:11px;
}


.vmember-stat-value{
  margin-top:3px;

  color:var(--vb-text);

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


/* ==========================================================
 * Profile
 * ========================================================== */

.vprofile{
  overflow:hidden;

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

  border-radius:18px;

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


.vprofile-banner{
  height:
    clamp(
      110px,
      15vw,
      180px
    );

  background:
    radial-gradient(
      circle
      at
      20%
      20%,
      rgba(93,183,255,.22),
      transparent 42%
    ),
    radial-gradient(
      circle
      at
      80%
      40%,
      rgba(161,104,255,.22),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    );
}


.vprofile-main{
  display:flex;
  align-items:flex-end;

  gap:16px;

  padding:
    0
    20px
    20px;

  margin-top:-38px;
}


.vprofile-avatar{
  width:82px;
  height:82px;

  flex:0 0 82px;

  display:grid;
  place-items:center;

  overflow:hidden;

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

  border-radius:22px;

  background:
    var(--vb-surface-2);

  color:var(--vb-text);

  font-size:24px;
  font-weight:950;
}


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

  object-fit:cover;
}


.vprofile-identity{
  min-width:0;

  flex:1;

  padding-bottom:4px;
}


.vprofile-name{
  overflow:hidden;

  color:var(--vb-text);

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

  letter-spacing:-.035em;

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


.vprofile-user{
  margin-top:3px;

  color:var(--vb-muted);

  font-size:13px;
}


.vprofile-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;

  gap:6px;

  margin-top:9px;
}


.vprofile-grid{
  display:grid;

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

  gap:10px;
}


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

  font-size:11px;
}


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

  color:var(--vb-text);

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

  font-variant-numeric:
    tabular-nums;
}


.vprofile-progress{
  height:8px;

  margin-top:10px;

  overflow:hidden;

  border-radius:999px;

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


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

  border-radius:inherit;

  background:
    var(--vb-accent);
}


/* ==========================================================
 * History
 * ========================================================== */

.vhistory-toolbar{
  display:grid;

  grid-template-columns:
    minmax(180px,1fr)
    220px;

  gap:9px;
}


.vhistory-list{
  display:flex;
  flex-direction:column;

  overflow:hidden;

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

  border-radius:12px;
}


.vhistory-row{
  display:grid;

  grid-template-columns:
    minmax(170px,1fr)
    140px
    130px;

  align-items:center;

  gap:14px;

  min-height:56px;

  padding:
    9px
    12px;

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


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


.vhistory-title{
  color:var(--vb-text);

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


.vhistory-kind{
  margin-top:3px;

  color:var(--vb-muted);

  font-size:11px;
}


.vhistory-time{
  color:var(--vb-muted);

  font-size:11px;
}


.vhistory-delta{
  text-align:right;

  color:var(--vb-text);

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

  font-variant-numeric:
    tabular-nums;
}


.vhistory-delta.is-positive{
  color:var(--vb-success);
}


.vhistory-delta.is-negative{
  color:var(--vb-danger);
}


/* ==========================================================
 * Achievements
 * ========================================================== */

.vach-grid{
  display:grid;

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

  gap:12px;
}


.vach-card{
  min-height:190px;
}


.vach-icon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

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

  border-radius:11px;

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

  font-size:17px;
}


.vach-card.is-unlocked .vach-icon{
  border-color:
    color-mix(
      in srgb,
      var(--vb-success) 35%,
      var(--vb-border)
    );

  background:
    var(--vb-success-soft);
}


.vach-name{
  margin-top:12px;

  color:var(--vb-text);

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


.vach-description{
  min-height:42px;

  margin-top:5px;

  color:var(--vb-muted);

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


.vach-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:16px;
}


.vcommunity-empty{
  padding:
    36px
    16px;

  color:var(--vb-muted);

  text-align:center;

  font-size:13px;
}


@media(max-width:1100px){

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


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

}


@media(max-width:680px){

  .vmembers-grid,
  .vach-grid,
  .vmembers-toolbar,
  .vhistory-toolbar,
  .vprofile-grid{
    grid-template-columns:1fr;
  }


  .vprofile-main{
    align-items:flex-start;

    flex-direction:column;

    margin-top:-42px;
  }


  .vhistory-row{
    grid-template-columns:
      minmax(0,1fr)
      auto;
  }


  .vhistory-time{
    display:none;
  }

}


/*
 * ==========================================================
 * VIBE PROFILE PERSONALIZATION 2.0
 * ==========================================================
 */

.vprofile-title-line{
  margin-top:5px;

  color:var(--vb-muted);

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


/* Themes only change accents/decorative surface.
 * Geometry remains shared.
 */

.vprofile-theme[data-profile-theme="cyan"]{
  --vb-accent:#57c7ff;
}


.vprofile-theme[data-profile-theme="violet"]{
  --vb-accent:#a56cff;
}


.vprofile-theme[data-profile-theme="rose"]{
  --vb-accent:#ff719d;
}


.vprofile-theme[data-profile-theme="gold"]{
  --vb-accent:#f7c75e;
}


.vprofile-theme[data-profile-theme="emerald"]{
  --vb-accent:#52e4aa;
}


/* Banner presets */

.vprofile-banner[data-banner="nebula"]{
  background:
    radial-gradient(
      circle at 22% 30%,
      rgba(91,178,255,.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 78% 34%,
      rgba(162,98,255,.27),
      transparent 39%
    ),
    linear-gradient(
      135deg,
      #151b28,
      #171522
    );
}


.vprofile-banner[data-banner="aurora"]{
  background:
    radial-gradient(
      circle at 25% 30%,
      rgba(68,232,173,.30),
      transparent 35%
    ),
    radial-gradient(
      circle at 70% 15%,
      rgba(77,188,255,.25),
      transparent 42%
    ),
    linear-gradient(
      120deg,
      #111d1c,
      #111827
    );
}


.vprofile-banner[data-banner="sunset"]{
  background:
    radial-gradient(
      circle at 25% 35%,
      rgba(255,111,92,.30),
      transparent 36%
    ),
    radial-gradient(
      circle at 76% 34%,
      rgba(255,181,75,.24),
      transparent 40%
    ),
    linear-gradient(
      125deg,
      #211415,
      #211b14
    );
}


.vprofile-banner[data-banner="grid"]{
  background-color:#151820;

  background-image:
    linear-gradient(
      rgba(255,255,255,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.045) 1px,
      transparent 1px
    );

  background-size:
    28px
    28px;
}


.vprofile-banner[data-banner="minimal"]{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    );
}

/* VIBE_SAFE_AVATAR_V1 */
.vavatar-safe {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.35),
      rgba(56,189,248,.18)
    );
}

.vavatar-safe-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--vb-text);
}

.vavatar-safe-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}