/*
 * ============================================================
 * BRILL VAULT DESKTOP OS V5
 * ACCOUNT WORKSPACE
 * ============================================================
 */

#bvAccountWorkspace {
  --aw-panel:
    rgba(12, 19, 31, .92);

  --aw-panel-strong:
    rgba(14, 23, 38, .97);

  --aw-border:
    rgba(130, 153, 190, .105);

  --aw-border-blue:
    rgba(73, 132, 226, .26);

  --aw-text:
    #eef3f8;

  --aw-muted:
    #718097;

  --aw-dim:
    #526178;

  --aw-blue:
    #4b87e8;

  --aw-green:
    #54d4a5;

  --aw-gold:
    #d4ad61;

  display:
    grid;

  gap:
    17px;

  color:
    var(--aw-text);
}


/* Existing account DOM remains alive for app.js bindings. */

#bvacLegacy {
  display:
    none !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.bvac-header {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  min-height:
    82px;

  gap:
    24px;
}

.bvac-heading {
  display:
    grid;

  gap:
    4px;
}

.bvac-kicker {
  margin:
    0;

  color:
    #6e91c4;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .19em;

  text-transform:
    uppercase;
}

.bvac-heading h1 {
  margin:
    0;

  color:
    #f3f6fa;

  font-size:
    31px;

  font-weight:
    780;

  letter-spacing:
    -.035em;
}

.bvac-heading p:last-child {
  margin:
    2px
    0
    0;

  color:
    var(--aw-muted);

  font-size:
    11px;
}

.bvac-header-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.bvac-chip {
  display:
    inline-flex;

  min-height:
    34px;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    11px;

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

  border-radius:
    9px;

  background:
    rgba(14, 22, 35, .70);

  color:
    #79879c;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .07em;
}

.bvac-chip.connected {
  border-color:
    rgba(82, 198, 153, .15);

  color:
    #8fc8af;
}

.bvac-chip.connected::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--aw-green);

  box-shadow:
    0 0 11px
    rgba(84, 212, 165, .5);
}

.bvac-refresh {
  min-height:
    34px !important;

  padding:
    0
    13px !important;

  border-radius:
    9px !important;

  font-size:
    9px !important;
}


/* ============================================================
   SUMMARY STRIP
   ============================================================ */

.bvac-summary {
  display:
    grid;

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

  overflow:
    hidden;

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

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(13, 21, 34, .91),
      rgba(8, 14, 23, .92)
    );
}

.bvac-stat {
  display:
    grid;

  align-content:
    center;

  min-height:
    84px;

  gap:
    5px;

  padding:
    15px
    18px;

  border-right:
    1px solid
    var(--aw-border);
}

.bvac-stat:last-child {
  border-right:
    0;
}

.bvac-stat span {
  color:
    #606f86;

  font-size:
    8px;

  font-weight:
    750;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.bvac-stat strong {
  overflow:
    hidden;

  color:
    #edf1f7;

  font-size:
    18px;

  font-weight:
    760;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-stat.positive strong {
  color:
    #8cc7af;
}

.bvac-stat.gold strong {
  color:
    #d8b66f;
}


/* ============================================================
   WORKSPACE
   ============================================================ */

.bvac-workspace {
  display:
    grid;

  grid-template-columns:
    minmax(510px, 1fr)
    400px;

  align-items:
    start;

  gap:
    14px;
}


/* ============================================================
   IDENTITY PANEL
   ============================================================ */

.bvac-identity {
  min-height:
    515px;

  overflow:
    hidden;

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

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(12, 19, 31, .91),
      rgba(8, 14, 23, .94)
    );
}

.bvac-identity-hero {
  display:
    grid;

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

  align-items:
    center;

  gap:
    17px;

  min-height:
    130px;

  padding:
    22px;

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

.bvac-avatar {
  display:
    grid;

  width:
    70px;

  height:
    70px;

  place-items:
    center;

  border:
    1px solid
    rgba(77, 132, 223, .24);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(52, 101, 179, .24),
      rgba(28, 52, 88, .10)
    );

  color:
    #dce9fd;

  font-size:
    25px;

  font-weight:
    780;

  box-shadow:
    inset 0 0 25px
    rgba(69, 122, 210, .08);
}

.bvac-identity-copy {
  display:
    grid;

  min-width:
    0;

  gap:
    5px;
}

.bvac-identity-copy small {
  color:
    #6687b8;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}

.bvac-identity-copy h2 {
  overflow:
    hidden;

  margin:
    0;

  color:
    #f1f4f9;

  font-size:
    22px;

  font-weight:
    770;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-identity-copy p {
  overflow:
    hidden;

  margin:
    0;

  color:
    #68778e;

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  min-height:
    27px;

  padding:
    0
    9px;

  border:
    1px solid
    rgba(75, 191, 148, .15);

  border-radius:
    999px;

  color:
    #8bc5ae;

  font-size:
    7px;

  font-weight:
    850;
}

.bvac-status::before {
  content:
    "";

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aw-green);
}


/* Identity rows */

.bvac-details {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;
}

.bvac-detail {
  display:
    grid;

  min-height:
    105px;

  align-content:
    center;

  gap:
    7px;

  padding:
    18px
    21px;

  border-right:
    1px solid
    var(--aw-border);

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

.bvac-detail:nth-child(2n) {
  border-right:
    0;
}

.bvac-detail span {
  color:
    #596a83;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .09em;

  text-transform:
    uppercase;
}

.bvac-value-line {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  gap:
    9px;
}

.bvac-value-line strong {
  overflow:
    hidden;

  color:
    #dde5ef;

  font-size:
    10px;

  font-weight:
    720;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-copy {
  display:
    grid;

  flex:
    0
    0
    25px;

  width:
    25px;

  height:
    25px;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(115, 143, 186, .13);

  border-radius:
    7px;

  background:
    rgba(47, 72, 109, .07);

  color:
    #7396cb;

  cursor:
    pointer;

  font-size:
    9px;
}

.bvac-copy:hover {
  border-color:
    rgba(77, 132, 223, .28);

  color:
    #b7d0f4;
}


/* Integration status */

.bvac-integration {
  display:
    grid;

  gap:
    11px;

  padding:
    18px
    21px;
}

.bvac-section-title {
  color:
    #53647d;

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;
}

.bvac-integration-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    29px;

  gap:
    18px;
}

.bvac-integration-row span {
  color:
    #68768c;

  font-size:
    9px;
}

.bvac-integration-row strong {
  max-width:
    340px;

  overflow:
    hidden;

  color:
    #dce3ed;

  font-size:
    9px;

  font-weight:
    720;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-positive {
  color:
    #8bc7ae !important;
}


/* ============================================================
   CARD / ACCESS PANEL
   ============================================================ */

.bvac-access {
  position:
    sticky;

  top:
    83px;

  display:
    grid;

  gap:
    14px;
}


/* Virtual card */

.bvac-card {
  position:
    relative;

  min-height:
    230px;

  overflow:
    hidden;

  padding:
    22px;

  border:
    1px solid
    rgba(196, 158, 89, .20);

  border-radius:
    19px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(199, 161, 89, .13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #15171b,
      #090b0f 65%,
      #111318
    );

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, .20);
}

.bvac-card::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      120deg,
      transparent 10%,
      rgba(255, 255, 255, .025),
      transparent 60%
    );
}

.bvac-card-top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;
}

.bvac-card-brand {
  display:
    grid;

  gap:
    3px;
}

.bvac-card-brand strong {
  color:
    #f0f2f5;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .10em;
}

.bvac-card-brand span {
  color:
    #656b75;

  font-size:
    7px;

  letter-spacing:
    .14em;
}

.bvac-tier {
  color:
    #d4ad61;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .15em;
}

.bvac-card-center {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  gap:
    5px;

  margin-top:
    52px;
}

.bvac-card-center small {
  color:
    #606875;

  font-size:
    7px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.bvac-card-center strong {
  overflow:
    hidden;

  color:
    #e4e7eb;

  font-size:
    15px;

  font-weight:
    600;

  letter-spacing:
    .08em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.bvac-card-bottom {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    31px;
}

.bvac-card-holder {
  display:
    grid;

  gap:
    3px;
}

.bvac-card-holder small {
  color:
    #5e6570;

  font-size:
    6px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.bvac-card-holder strong {
  color:
    #bfc5cc;

  font-size:
    9px;

  font-weight:
    650;

  text-transform:
    uppercase;
}


/* Limit panel */

.bvac-limits {
  overflow:
    hidden;

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

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(14, 22, 35, .91),
      rgba(8, 14, 23, .94)
    );
}

.bvac-limits-head {
  padding:
    15px
    17px;

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

.bvac-limits-head strong {
  color:
    #dce3ed;

  font-size:
    10px;

  font-weight:
    760;
}

.bvac-limit-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    49px;

  gap:
    18px;

  padding:
    0
    17px;

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

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

.bvac-limit-row span {
  color:
    #69778c;

  font-size:
    9px;
}

.bvac-limit-row strong {
  color:
    #dce3ed;

  font-size:
    9px;

  font-weight:
    720;
}


/* ============================================================
   QUICK APPLICATIONS
   ============================================================ */

.bvac-apps {
  display:
    grid;

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

  gap:
    9px;
}

.bvac-app {
  display:
    grid;

  min-height:
    82px;

  align-content:
    center;

  gap:
    5px;

  padding:
    13px
    15px;

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

  border-radius:
    13px;

  background:
    rgba(12, 19, 31, .76);

  color:
    inherit;

  cursor:
    pointer;

  font:
    inherit;

  text-align:
    left;

  transition:
    .15s ease;
}

.bvac-app:hover {
  border-color:
    rgba(76, 132, 222, .25);

  background:
    rgba(39, 68, 113, .11);

  transform:
    translateY(-1px);
}

.bvac-app small {
  color:
    #6181b2;

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}

.bvac-app strong {
  color:
    #dce4ef;

  font-size:
    10px;

  font-weight:
    730;
}

.bvac-app span {
  color:
    #5e6e84;

  font-size:
    8px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.bvac-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    35px;

  padding:
    0
    3px;

  color:
    #4f5e73;

  font-size:
    8px;
}

.bvac-footer-left,
.bvac-footer-right {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}

.bvac-footer-dot {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--aw-green);
}


/* ============================================================
   ERROR
   ============================================================ */

.bvac-load-error {
  display:
    grid;

  min-height:
    160px;

  place-items:
    center;

  color:
    #c97983;

  font-size:
    10px;

  text-align:
    center;
}


/* ============================================================
   DESKTOP BREAKPOINTS
   ============================================================ */

@media (max-width: 1450px) {

  .bvac-workspace {
    grid-template-columns:
      minmax(470px, 1fr)
      365px;
  }

}

@media (max-width: 1250px) {

  .bvac-workspace {
    grid-template-columns:
      minmax(440px, 1fr)
      330px;
  }

}