/* The original black background and its pseudo-element stripes are untouched. */
#app .storageCard.bpc-card {
  --bpc-muted: #c0c9d2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title expiry" "online online" "traffic traffic" "progress progress" "reset reset" "actions actions";
  align-content: start;
  padding: 24px;
  column-gap: 18px;
  container-type: inline-size;
  color: #f5f7fa;
}
.bpc-card .bpc-contents { display: contents !important; }
.bpc-card .bpc-title {
  grid-area: title;
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 650;
  letter-spacing: -.35px;
  overflow-wrap: anywhere;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.bpc-card .bpc-expiry {
  grid-area: expiry;
  display: flex;
  align-items: center;
  gap: 3px;
  align-self: center;
  margin: 0 !important;
  color: #e9eff4;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.bpc-card .bpc-expiry .v-icon { font-size: 17px !important; margin-left: 4px !important; }
#app .bpc-card #beup-online-terminal-v1 {
  grid-area: online;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  max-width: 100% !important;
  width: max-content !important;
  min-width: 0 !important;
  justify-self: start;
  margin: 12px 0 0;
  padding: 7px 9px !important;
  border: 1px solid rgba(188,214,224,.2);
  border-radius: 9px;
  background: rgba(15,24,32,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: 13px !important;
  line-height: 20px !important;
  white-space: normal !important;
  gap: 6px;
  color: var(--bpc-muted);
  text-shadow: none;
}
#app .bpc-card #beup-online-terminal-v1::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  background: #b3d5dd;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3M8 17v4m-3 0h7'/%3E%3Crect x='15' y='10' width='7' height='12' rx='1.5'/%3E%3Cpath d='M18 19h1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3M8 17v4m-3 0h7'/%3E%3Crect x='15' y='10' width='7' height='12' rx='1.5'/%3E%3Cpath d='M18 19h1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bpc-terminal-label, .bpc-terminal-value { display: none !important; }
#app .bpc-card .beup-online-terminal-v1__label { display: none; }
#app .bpc-card .bpc-terminal-label { display: block !important; font-weight: 500; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .bpc-card .bpc-terminal-value { display: inline-flex !important; }
#app .bpc-card .beup-online-terminal-v1__value {
  border-left: 1px solid rgba(198,218,226,.24);
  padding-left: 6px;
  min-inline-size: 0;
  max-width: none;
  flex: 0 0 auto;
  justify-content: flex-start;
  font-size: 15px;
  line-height: 20px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
#app .bpc-card .beup-online-terminal-v1__value:not(.bpc-terminal-value) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-inline-size: 0 !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip-path: inset(50%); white-space: nowrap;
}
.bpc-card .bpc-cloud { display: none !important; }
.bpc-card .bpc-traffic {
  grid-area: traffic;
  display: flex !important;
  align-items: end !important;
  gap: 5px;
  margin: 0 !important;
  padding: 16px 0 12px !important;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.bpc-card .bpc-source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bpc-card .bpc-traffic-display { display: flex; align-items: end; justify-content: space-between; flex: 1; min-width: 0; gap: 12px; }
.bpc-card .bpc-remaining { display: grid; gap: 4px; min-width: 0; }
.bpc-card .bpc-label { font-size: 13px; line-height: 20px; color: var(--bpc-muted); }
.bpc-card .bpc-value { display: flex; gap: 7px; align-items: baseline; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bpc-card .bpc-amount { font-size: 38px; font-weight: 650; letter-spacing: -.8px; }
.bpc-card .bpc-unit { font-size: 15px; font-weight: 550; }
.bpc-card .bpc-used { font-size: 13px; line-height: 22px; color: var(--bpc-muted); white-space: nowrap; }
.bpc-card .bpc-traffic > .v-icon { font-size: 17px !important; margin: 0 0 2px 0 !important; color: var(--bpc-muted); }
.bpc-card .bpc-progress { grid-area: progress; min-width: 0; position: relative; z-index: 1; }
.bpc-card .bpc-reset {
  grid-area: reset;
  display: flex !important;
  margin: 0 !important;
  padding: 10px 0 18px !important;
  color: var(--bpc-muted);
  position: relative;
  z-index: 1;
}
.bpc-card .bpc-reset > span { font-size: 12px !important; line-height: 20px; }
.bpc-card .bpc-reset .v-icon { font-size: 17px !important; margin-left: 5px !important; }
.bpc-card .bpc-actions {
  grid-area: actions;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.16);
  position: relative;
  z-index: 1;
}
.bpc-card .bpc-actions .v-btn {
  width: 100%;
  min-width: 0;
  height: 42px !important;
  padding: 0 8px !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 20px;
  font-weight: 550;
  letter-spacing: 0;
  color: #f5f7fa !important;
  background: rgba(29,38,48,.24) !important;
  border: 1px solid rgba(236,244,250,.35);
  box-shadow: none !important;
}
.bpc-card .bpc-actions .bpc-primary { background: rgb(var(--v-theme-primary)) !important; border-color: transparent; }
.bpc-card .bpc-actions .v-btn .v-icon { font-size: 16px; margin-right: 5px !important; }
.bpc-card .bpc-actions .v-btn:focus-visible { outline: 2px solid #d1f4fa; outline-offset: 3px; }
.bpc-card .bpc-actions .v-btn:hover { border-color: rgba(236,244,250,.72); }
@container (max-width: 460px) {
  .bpc-card .bpc-title { font-size: 20px !important; }
  .bpc-card .bpc-expiry { font-size: 14px !important; }
  .bpc-card .bpc-actions { gap: 8px; }
  .bpc-card .bpc-actions .v-btn { font-size: 12px !important; }
}
@media (max-width: 599px) {
  #app .storageCard.bpc-card { padding: 20px; column-gap: 10px; }
  .bpc-card .bpc-title { font-size: 20px !important; }
  .bpc-card .bpc-expiry { font-size: 14px !important; }
  .bpc-card .bpc-expiry .v-icon { font-size: 17px !important; }
  #app .bpc-card #beup-online-terminal-v1 { font-size: 12px !important; gap: 6px; padding: 7px 8px !important; }
  #app .bpc-card .beup-online-terminal-v1__value { font-size: 14px; padding-left: 6px; }
  .bpc-card .bpc-amount { font-size: 38px; }
  .bpc-card .bpc-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .bpc-card .bpc-actions .v-btn { height: 44px !important; font-size: 13px !important; }
  .bpc-card .bpc-traffic { padding-top: 16px !important; }
  .bpc-card .bpc-long-value .bpc-amount { font-size: 27px; }
}
@media (max-width: 359px) {
  #app .storageCard.bpc-card { grid-template-columns: minmax(0,1fr); grid-template-areas: "title" "expiry" "online" "traffic" "progress" "reset" "actions"; padding: 18px; }
  .bpc-card .bpc-expiry { justify-self: start; margin-top: 6px !important; }
  .bpc-card .bpc-used { font-size: 12px; }
}