/*
 * ==========================================================
 * VIBE MONEY PRINTERS UI 2.0
 * ==========================================================
 */

.vmpx{
  padding-bottom:26px;
}


.vmpx-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:20px;

  margin-bottom:16px;

  padding:
    20px
    22px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:20px;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(129,92,246,.13),
      transparent 37%
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(59,130,246,.07),
      transparent 33%
    ),
    rgba(255,255,255,.018);
}


.vmpx-eyebrow,
.vmpx-section-head span,
.vmpx-section-title{
  color:
    var(--vb-text-soft,#929bad);

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

  letter-spacing:.12em;

  text-transform:uppercase;
}


.vmpx-hero h1{
  margin:
    5px
    0
    5px;

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  letter-spacing:-.035em;
}


.vmpx-hero p,
.vmpx-battery-store p{
  margin:0;

  color:
    var(--vb-text-soft,#929bad);

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


.vmpx-summary{
  display:grid;

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

  gap:7px;

  min-width:320px;
}


.vmpx-summary>div{
  padding:
    10px
    11px;

  border:
    1px solid
    rgba(255,255,255,.06);

  border-radius:13px;

  background:
    rgba(0,0,0,.16);
}


.vmpx-summary span{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

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

  text-transform:uppercase;
}


.vmpx-summary strong{
  display:block;

  margin-top:4px;

  font-family:
    ui-monospace,
    monospace;

  font-size:14px;
}


.vmpx-grid{
  display:grid;

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

  gap:14px;

  margin-bottom:14px;
}


.vmpx-machine{
  position:relative;

  overflow:hidden;

  min-width:0;

  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}


.vmpx-machine:hover{
  transform:
    translateY(-2px);
}


.vmpx-machine.is-running{
  border-color:
    rgba(96,165,250,.20)
    !important;
}


.vmpx-machine.is-action{
  box-shadow:
    0 0 0 1px
      rgba(139,124,255,.15),
    0 0 30px
      rgba(139,124,255,.05);
}


.vmpx-machine-visual{
  height:134px;

  display:grid;
  place-items:center;

  margin-bottom:15px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:16px;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(96,165,250,.075),
      transparent 38%
    ),
    #090c12;
}


.vmpx-machine-visual.is-premium{
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(168,85,247,.12),
      transparent 42%
    ),
    #090c12;
}


.vmpx-printer-shell{
  position:relative;

  width:132px;
  height:92px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      #171c26,
      #0c1017
    );

  box-shadow:
    0 16px 28px
    rgba(0,0,0,.28);
}


.vmpx-printer-screen{
  position:absolute;

  top:16px;
  left:19px;

  width:55px;
  height:24px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(96,165,250,.20);

  border-radius:6px;

  background:
    rgba(96,165,250,.06);

  color:#93c5fd;

  font-family:
    ui-monospace,
    monospace;

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

  letter-spacing:.12em;
}


.vmpx-printer-light{
  position:absolute;

  top:20px;
  right:19px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#64748b;
}


.is-running
.vmpx-printer-light{
  background:#4ade80;

  box-shadow:
    0 0 9px
    rgba(74,222,128,.65);

  animation:
    vmpx-light
    .9s
    ease-in-out
    infinite;
}


.vmpx-printer-slot{
  position:absolute;

  left:18px;
  right:18px;
  bottom:14px;

  height:22px;

  overflow:hidden;

  border-radius:5px;

  background:#06080c;
}


.vmpx-paper{
  position:absolute;

  width:50px;
  height:25px;

  left:50%;
  top:-22px;

  margin-left:-25px;

  display:grid;
  place-items:center;

  border-radius:
    2px
    2px
    5px
    5px;

  background:#e5e7eb;

  color:#111827;

  font-family:
    ui-monospace,
    monospace;

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


.is-running
.vmpx-paper{
  animation:
    vmpx-paper
    1.35s
    cubic-bezier(.35,.1,.25,1)
    infinite;
}


.vmpx-fan{
  position:absolute;

  right:-11px;
  bottom:-11px;

  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:50%;

  background:#080b10;

  color:#64748b;
}


.is-running
.vmpx-fan{
  color:#93c5fd;

  animation:
    vmpx-fan
    .7s
    linear
    infinite;
}


.vmpx-machine-head,
.vmpx-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:12px;

  margin-bottom:13px;
}


.vmpx-machine-name{
  font-size:17px;
  font-weight:900;

  letter-spacing:-.02em;
}


.vmpx-machine-sub{
  margin-top:3px;

  color:
    var(--vb-text-soft,#929bad);

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

  letter-spacing:.10em;
}


.vmpx-status{
  padding:
    6px
    8px;

  border-radius:999px;

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

  letter-spacing:.06em;
}


.vmpx-status.running{
  color:#86efac;

  background:
    rgba(34,197,94,.10);

  border:
    1px solid
    rgba(34,197,94,.18);
}


.vmpx-status.idle,
.vmpx-status.available{
  color:#93c5fd;

  background:
    rgba(59,130,246,.09);

  border:
    1px solid
    rgba(59,130,246,.17);
}


.vmpx-status.locked{
  color:#cbd5e1;

  background:
    rgba(148,163,184,.08);

  border:
    1px solid
    rgba(148,163,184,.14);
}


.vmpx-display,
.vmpx-veteran-display{
  position:relative;

  padding:
    17px
    16px;

  margin-bottom:11px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.055);

  border-radius:14px;

  background:#080b10;
}


.vmpx-display small,
.vmpx-veteran-display small{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

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

  letter-spacing:.10em;
}


.vmpx-display strong,
.vmpx-veteran-display strong{
  display:block;

  margin-top:4px;

  font-family:
    ui-monospace,
    monospace;

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


.vmpx-display strong span,
.vmpx-veteran-display strong span{
  margin-left:4px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:11px;
}


.vmpx-live-indicator{
  position:absolute;

  top:11px;
  right:11px;

  display:flex;
  align-items:center;

  gap:5px;

  color:#86efac;

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

  text-transform:uppercase;
}


.vmpx-live-indicator i{
  width:5px;
  height:5px;

  border-radius:50%;

  background:#4ade80;

  animation:
    vmpx-pulse
    .9s
    ease-in-out
    infinite;
}


.vmpx-spec-grid{
  display:grid;

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

  gap:7px;

  margin-bottom:12px;
}


.vmpx-spec-grid>div{
  padding:
    9px
    10px;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:11px;

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


.vmpx-spec-grid span{
  display:block;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vmpx-spec-grid strong{
  display:block;

  margin-top:3px;

  font-family:
    ui-monospace,
    monospace;

  font-size:11px;
}


.vmpx-spec-grid .is-safe{
  color:#86efac;
}


.vmpx-spec-grid .is-danger{
  color:#fca5a5;
}


.vmpx-meter{
  margin-top:9px;
}


.vmpx-meter>div:first-child{
  display:flex;
  justify-content:space-between;

  margin-bottom:5px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vmpx-meter b{
  color:
    var(--vb-text,#f4f6fb);

  font-family:
    ui-monospace,
    monospace;
}


.vmpx-progress{
  height:7px;

  overflow:hidden;

  border-radius:999px;

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


.vmpx-progress i{
  display:block;

  height:100%;

  border-radius:inherit;

  background:
    linear-gradient(
      90deg,
      #2563eb,
      #60a5fa
    );

  transition:
    width .24s linear;
}


.vmpx-progress.is-life i{
  background:
    linear-gradient(
      90deg,
      #7c3aed,
      #a78bfa
    );
}


.vmpx-next-print{
  margin-top:10px;

  color:
    var(--vb-text-soft,#929bad);

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

  letter-spacing:.09em;
}


.vmpx-next-print>div{
  height:2px;

  margin-top:5px;

  overflow:hidden;

  border-radius:999px;

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


.vmpx-next-print i{
  display:block;

  width:0;
  height:100%;

  background:#93c5fd;

  box-shadow:
    0 0 8px
    rgba(96,165,250,.45);
}


.vmpx-upgrades{
  margin-top:15px;

  padding-top:12px;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.vmpx-section-title{
  margin-bottom:8px;
}


.vmpx-upgrade{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:
    9px
    0;

  border-bottom:
    1px solid
    rgba(255,255,255,.04);
}


.vmpx-upgrade:last-child{
  border-bottom:0;
}


.vmpx-upgrade-copy{
  min-width:0;
}


.vmpx-upgrade-copy>div{
  font-size:11px;
  font-weight:850;
}


.vmpx-upgrade-copy>div span{
  margin-left:4px;

  color:
    var(--vb-text-soft,#929bad);
}


.vmpx-upgrade-copy small{
  display:block;

  margin-top:3px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vmpx-upgrade-button{
  flex:none;

  min-height:34px
    !important;

  padding:
    0
    10px
    !important;

  font-size:10px
    !important;
}


.vmpx-max{
  color:#86efac;

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


.vmpx-actions{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  margin-top:14px;
}


.vmpx-actions
.vb-button,
.vmpx-buy,
.vmpx-build-veteran{
  flex:
    1
    1
    180px;
}


.vmpx-battery-store{
  margin-bottom:14px;
}


.vmpx-battery-store
>.vb-card-body{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;
}


.vmpx-battery-store h3{
  margin:
    4px
    0
    3px;
}


.vmpx-battery-store
.vb-button{
  flex:none;
}


.vmpx-settlements,
.vmpx-veteran{
  margin-bottom:14px;
}


.vmpx-section-head h3{
  margin:
    4px
    0
    0;

  font-size:17px;
}


.vmpx-count,
.vmpx-veteran-badge{
  padding:
    6px
    9px;

  border-radius:999px;

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

  color:#c4b5fd;

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


.vmpx-final{
  display:grid;

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

  align-items:center;

  gap:14px;

  padding:
    11px
    0;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.vmpx-final>div:first-child span{
  display:block;

  margin-top:3px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:10px;
}


.vmpx-final-values{
  display:flex;

  gap:12px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vmpx-final-values b{
  color:
    var(--vb-text,#f4f6fb);

  font-family:
    ui-monospace,
    monospace;
}


.vmpx-reserves{
  margin-top:12px;

  padding-top:12px;

  border-top:
    1px solid
    rgba(255,255,255,.05);
}


.vmpx-reserve{
  display:flex;
  justify-content:space-between;

  padding:
    7px
    0;

  color:
    var(--vb-text-soft,#929bad);

  font-size:10px;
}


.vmpx-reserve strong{
  color:
    var(--vb-text,#f4f6fb);

  font-family:
    ui-monospace,
    monospace;
}


.vmpx-veteran{
  border-color:
    rgba(168,85,247,.16)
    !important;

  background:
    radial-gradient(
      circle at 75% 0,
      rgba(168,85,247,.10),
      transparent 36%
    ),
    rgba(255,255,255,.018)
    !important;
}


.vmpx-veteran.is-broken{
  border-color:
    rgba(239,68,68,.32)
    !important;
}


.vmpx-veteran-badge.live{
  color:#86efac;

  background:
    rgba(34,197,94,.10);
}


.vmpx-veteran-badge.danger{
  color:#fca5a5;

  background:
    rgba(239,68,68,.10);
}


.vmpx-parts{
  display:grid;

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

  gap:7px;

  margin-bottom:13px;
}


.vmpx-part{
  display:flex;
  align-items:center;

  gap:9px;

  padding:9px;

  opacity:.45;

  border:
    1px solid
    rgba(255,255,255,.05);

  border-radius:11px;

  background:
    rgba(0,0,0,.13);
}


.vmpx-part.is-owned{
  opacity:1;

  border-color:
    rgba(74,222,128,.18);
}


.vmpx-part-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#080b10;
}


.vmpx-part strong{
  display:block;

  font-size:10px;
}


.vmpx-part span{
  display:block;

  margin-top:2px;

  color:
    var(--vb-text-soft,#929bad);

  font-size:9px;
}


.vmpx-lock{
  padding:12px;

  border-radius:12px;

  background:
    rgba(148,163,184,.055);

  color:
    var(--vb-text-soft,#929bad);

  font-size:11px;
}


.vmpx-loading{
  min-height:250px;

  display:grid;
  place-items:center;

  align-content:center;

  gap:12px;
}


.vmpx-loading i{
  width:28px;
  height:28px;

  border:
    2px solid
    rgba(255,255,255,.10);

  border-top-color:
    var(--vb-accent,#8b7cff);

  border-radius:50%;

  animation:
    vmpx-spin
    .65s
    linear
    infinite;
}


.vmpx-loading span{
  color:
    var(--vb-text-soft,#929bad);

  font-size:11px;
}


.vmpx .is-busy{
  position:relative;

  opacity:.72;

  cursor:wait;
}


@keyframes vmpx-spin{
  to{
    transform:
      rotate(360deg);
  }
}


@keyframes vmpx-fan{
  to{
    transform:
      rotate(360deg);
  }
}


@keyframes vmpx-paper{
  0%{
    transform:
      translateY(0);

    opacity:0;
  }

  15%{
    opacity:1;
  }

  78%{
    opacity:1;
  }

  100%{
    transform:
      translateY(37px);

    opacity:0;
  }
}


@keyframes vmpx-light{
  0%,
  100%{
    opacity:.45;
  }

  50%{
    opacity:1;
  }
}


@keyframes vmpx-pulse{
  0%,
  100%{
    transform:
      scale(.75);

    opacity:.45;
  }

  50%{
    transform:
      scale(1.25);

    opacity:1;
  }
}


@media(max-width:900px){

  .vmpx-hero{
    align-items:stretch;
    flex-direction:column;
  }


  .vmpx-summary{
    min-width:0;
  }

}


@media(max-width:760px){

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


  .vmpx-summary{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }


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


  .vmpx-final{
    grid-template-columns:1fr;

    gap:7px;
  }


  .vmpx-final-values{
    justify-content:space-between;
  }


  .vmpx-battery-store
  >.vb-card-body{
    align-items:stretch;
    flex-direction:column;
  }


  .vmpx-battery-store
  .vb-button{
    width:100%;
  }

}


@media(
  prefers-reduced-motion:
  reduce
){

  .vmpx *,
  .vmpx *::before,
  .vmpx *::after{
    animation:none
      !important;

    transition:none
      !important;
  }

}