/*
 * ==========================================================
 * VIBE PERSONALIZATION UI 2.0
 * ==========================================================
 */

/* VIBE_PERSONALIZATION_UI_V20 */

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


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

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

  font-weight:950;

  letter-spacing:-.045em;
}


.vpers-hero-sub{
  max-width:760px;

  margin-top:7px;

  color:var(--vb-muted);

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


.vpers-grid{
  display:grid;

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

  gap:12px;
}


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

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


.vpers-section-sub{
  margin-top:4px;

  color:var(--vb-muted);

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


.vpers-form{
  display:grid;

  gap:13px;

  margin-top:16px;
}


.vpers-theme-grid,
.vpers-banner-grid{
  display:grid;

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

  gap:7px;
}


.vpers-choice{
  min-height:58px;

  padding:9px;

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

  border-radius:10px;

  color:var(--vb-muted);

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

  cursor:pointer;

  text-align:left;
}


.vpers-choice.is-active{
  border-color:
    var(--vb-accent);

  color:var(--vb-text);

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


.vpers-swatch{
  width:100%;
  height:18px;

  margin-bottom:7px;

  border-radius:6px;
}


.vpers-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  min-height:56px;

  padding:
    10px
    12px;

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


.vpers-toggle:last-child{
  border-bottom:0;
}


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

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


.vpers-toggle-sub{
  margin-top:3px;

  color:var(--vb-muted);

  font-size:11px;
}


.vpers-switch{
  width:42px;
  height:24px;

  flex:0 0 42px;

  position:relative;

  border:0;
  border-radius:999px;

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

  cursor:pointer;
}


.vpers-switch::after{
  content:"";

  position:absolute;

  width:18px;
  height:18px;

  left:3px;
  top:3px;

  border-radius:50%;

  background:
    var(--vb-text);

  transition:
    transform
    var(--vb-motion-fast)
    var(--vb-ease);
}


.vpers-switch.is-on{
  background:
    var(--vb-accent);
}


.vpers-switch.is-on::after{
  transform:
    translateX(18px);
}


.vpers-actions{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
}


.vpers-preview{
  height:96px;

  border-radius:12px;

  margin-top:14px;
}


.vpers-banner-nebula{
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(91,178,255,.28),
      transparent 35%
    ),
    radial-gradient(
      circle at 75% 35%,
      rgba(162,98,255,.27),
      transparent 40%
    ),
    #151824;
}


.vpers-banner-aurora{
  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(68,232,173,.32),
      transparent 38%
    ),
    radial-gradient(
      circle at 75% 20%,
      rgba(77,188,255,.28),
      transparent 40%
    ),
    #111d1c;
}


.vpers-banner-sunset{
  background:
    radial-gradient(
      circle at 25% 35%,
      rgba(255,111,92,.34),
      transparent 37%
    ),
    radial-gradient(
      circle at 75% 30%,
      rgba(255,181,75,.27),
      transparent 42%
    ),
    #201516;
}


.vpers-banner-grid{
  background-color:#151820;

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

  background-size:
    20px
    20px;
}


.vpers-banner-minimal{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.015)
    );
}


@media(max-width:850px){

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

}


@media(max-width:560px){

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

}