/*
 * ==========================================================
 * VIBE WALLET UI 2.0
 * ==========================================================
 */

/* VIBE_WALLET_UI_V20 */

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


.vw-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}


.vw-stat-grid{
  display:grid;

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

  gap:10px;
}


.vw-stat{
  min-width:0;
}


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

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

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


.vw-stat-value{
  margin-top:8px;

  color:
    var(--vb-text);

  font-size:
    clamp(
      17px,
      1.4vw,
      24px
    );

  font-weight:850;

  letter-spacing:-.035em;

  font-variant-numeric:
    tabular-nums;
}


.vw-stat-note{
  margin-top:5px;

  color:
    var(--vb-muted);

  font-size:14px;
}


.vw-positive{
  color:
    var(--vb-success);
}


.vw-negative{
  color:
    var(--vb-danger);
}


.vw-chart-card{
  overflow:visible;
}


.vw-chart-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}


.vw-chart-host{
  margin-top:12px;
}


.vw-history-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}


.vw-history-filter{
  width:
    min(
      230px,
      100%
    );
}


.vw-transactions{
  display:flex;
  flex-direction:column;

  overflow:hidden;

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

  border-radius:
    var(--vb-radius-lg);
}


.vw-transaction{
  display:grid;

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

  gap:18px;

  align-items:center;

  min-height:58px;

  padding:
    11px
    14px;

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

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


.vw-transaction:last-child{
  border-bottom:0;
}


.vw-transaction:hover{
  background:
    rgba(255,255,255,.025);
}


.vw-transaction-main{
  min-width:0;
}


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

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


.vw-transaction-meta{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:14px;

  overflow-wrap:anywhere;
}


.vw-transaction-side{
  min-width:116px;

  text-align:right;
}


.vw-transaction-delta{
  font-size:13px;
  font-weight:850;

  font-variant-numeric:
    tabular-nums;
}


.vw-transaction-balance{
  margin-top:4px;

  color:
    var(--vb-muted);

  font-size:14px;

  font-variant-numeric:
    tabular-nums;
}


.vw-empty{
  padding:28px;

  color:
    var(--vb-muted);

  text-align:center;
}


.vw-transfer-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(250px,.65fr);

  gap:12px;
}


.vw-transfer-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}


.vw-field-row{
  display:grid;

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

  gap:8px;

  align-items:end;
}


.vw-recipient-status{
  display:flex;
  align-items:center;
  gap:7px;

  min-height:30px;

  padding:
    7px
    10px;

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

  border-radius:
    10px;

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

  color:
    var(--vb-muted);

  font-size:14px;
}


.vw-recipient-status::before{
  content:"";

  flex:0 0 auto;

  width:6px;
  height:6px;

  border-radius:999px;

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


.vw-recipient-status.is-valid{
  color:
    var(--vb-success);
}


.vw-recipient-status.is-valid::before{
  background:
    var(--vb-success);
}


.vw-recipient-status.is-error{
  color:
    var(--vb-danger);
}


.vw-recipient-status.is-error::before{
  background:
    var(--vb-danger);
}


.vw-balance-panel{
  height:max-content;
}


.vw-balance-big{
  margin-top:7px;

  color:
    var(--vb-text);

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

  font-weight:900;

  letter-spacing:-.04em;

  font-variant-numeric:
    tabular-nums;
}


.vw-balance-caption{
  margin-top:7px;

  color:
    var(--vb-muted);

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


.vw-loading-grid{
  display:grid;

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

  gap:10px;
}


@media(max-width:980px){

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


  .vw-transfer-layout{
    grid-template-columns:
      1fr;
  }

}


@media(max-width:620px){

  .vw-stat-grid,
  .vw-loading-grid{
    grid-template-columns:
      1fr;
  }


  .vw-actions{
    justify-content:flex-start;
  }


  .vw-field-row{
    grid-template-columns:
      1fr;
  }


  .vw-transaction{
    grid-template-columns:
      1fr;

    gap:7px;
  }


  .vw-transaction-side{
    min-width:0;

    text-align:left;
  }

}