/* Compact expiry status with measured single-line text on mobile. */
html body #app .storageCard.bpc-card {
  --beup-expiry-color:#79e5b1;
  grid-template-rows:54px 40px 80px 6px 38px 68px;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title expiry" "online online" "traffic traffic" "progress progress" "reset reset" "actions actions";
}
html #app .bpc-card .bpc-title {
  align-self:center;
  display:block;
  min-width:0;
  height:auto;
  margin:0;
  overflow:hidden;
  color:#f7f9fb;
  font-size:20px !important;
  line-height:30px !important;
  letter-spacing:0;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html #app .bpc-card .bpc-expiry {
  align-self:center;
  justify-self:end;
  width:max-content;
  max-width:none;
  min-width:202px;
  height:34px;
  margin:0;
}
html #app .bpc-card .beup-expiry-enhanced {
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
  padding-left:14px;
  font-size:0 !important;
  line-height:0 !important;
}
html #app .bpc-card .beup-expiry-enhanced::before {
  position:absolute;
  top:5px;
  bottom:5px;
  left:0;
  width:1px;
  background:rgba(214,232,237,.22);
  content:"";
}
html #app .bpc-card .beup-expiry-enhanced > .v-icon {
  position:absolute;
  top:50%;
  right:0;
  z-index:2;
  margin:0 !important;
  color:#aebbc5;
  font-size:16px !important;
  line-height:16px;
  transform:translateY(-50%);
}
.beup-expiry-ui {
  display:flex;
  align-items:center;
  width:max-content;
  min-width:0;
  height:34px;
  padding-right:23px;
  gap:9px;
  box-sizing:border-box;
  color:#f7f9fb;
  letter-spacing:0;
  text-align:left;
}
.beup-expiry-heading {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
  color:#c3cdd5;
  font-size:13px;
  font-weight:500;
  line-height:20px;
  white-space:nowrap;
}
.beup-expiry-icon {
  position:relative;
  display:inline-block;
  flex:0 0 22px;
  width:22px;
  height:22px;
  color:var(--beup-expiry-color);
  font-size:22px;
  line-height:22px;
  animation:beup-expiry-icon-breathe 3.2s ease-in-out infinite;
}
.beup-hourglass-frame { position:absolute; inset:0; font-size:inherit; font-style:normal; line-height:inherit; transform:scaleX(1.15); transform-origin:center; }
.beup-hourglass-top,.beup-hourglass-bottom { position:absolute; left:28%; width:44%; height:25%; overflow:hidden; }
.beup-hourglass-top { top:20%; clip-path:polygon(0 0,100% 0,100% 40%,50% 100%,0 40%); }
.beup-hourglass-bottom { bottom:20%; clip-path:polygon(50% 0,100% 60%,100% 100%,0 100%,0 60%); }
.beup-hourglass-top > i,.beup-hourglass-bottom > i { position:absolute; bottom:0; left:0; width:100%; background:currentColor; transition:height .6s ease; }
.beup-hourglass-top > i { height:calc(var(--beup-sand-fill,0) * 100%); }
.beup-hourglass-bottom > i { height:calc((1 - var(--beup-sand-fill,0)) * 100%); }
.beup-hourglass-stream { position:absolute; top:44%; left:calc(50% - .5px); width:1px; height:24%; background:repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 3px); animation:beup-sand-flow 1.2s linear infinite; }
.beup-expiry-icon[data-flowing="false"] .beup-hourglass-stream { display:none; }
.beup-expiry-icon[data-sand-level="unknown"] :is(.beup-hourglass-top,.beup-hourglass-bottom) { display:none; }
.beup-expiry-ui[data-expiry-state="soon"] .beup-hourglass-stream { animation-duration:.9s; }
.beup-expiry-ui[data-expiry-state="urgent"] .beup-hourglass-stream { animation-duration:.6s; }
.beup-expiry-ui[data-expiry-state="expired"] .beup-expiry-icon { animation:none; }
@keyframes beup-sand-flow { to { background-position:0 6px; } }
.beup-expiry-countdown {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
  overflow:visible;
  color:#f7f9fb;
  font-size:13px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  line-height:20px;
  white-space:nowrap;
}
.beup-expiry-days,
.beup-expiry-clock,
.beup-expiry-message { display:inline-block; flex:0 0 auto; }
.beup-expiry-countdown > :empty { display:none; }
.beup-expiry-days { color:var(--beup-expiry-color); font-weight:700; }
.beup-expiry-clock {
  margin-left:7px;
  padding-left:7px;
  border-left:1px solid rgba(214,232,237,.2);
  color:#f7f9fb;
}
.beup-expiry-message { color:var(--beup-expiry-color); }
.beup-expiry-countdown--message { justify-content:flex-end; }
.beup-expiry-ui[data-expiry-state="active"],
.beup-expiry-ui[data-expiry-state="permanent"] { --beup-expiry-color:#79e5b1; }
.beup-expiry-ui[data-expiry-state="soon"] { --beup-expiry-color:#ffd166; }
.beup-expiry-ui[data-expiry-state="urgent"],
.beup-expiry-ui[data-expiry-state="expired"] { --beup-expiry-color:#ff9292; }
.beup-expiry-ui[data-expiry-state="unknown"],
.beup-expiry-ui[data-expiry-state="none"] { --beup-expiry-color:#b8c5ce; }
.beup-expiry-ui:is([data-expiry-state="soon"],[data-expiry-state="urgent"]) .beup-expiry-countdown {
  animation:beup-expiry-value-breathe 2.4s ease-in-out infinite;
}
.beup-expiry-ui[data-expiry-state="urgent"] .beup-expiry-countdown { animation-duration:1.8s; }
.beup-expiry-ui:is([data-expiry-state="unknown"],[data-expiry-state="none"]) .beup-expiry-icon { animation:none; }
@keyframes beup-expiry-icon-breathe {
  0%,100% { opacity:.64; filter:drop-shadow(0 0 0 transparent); }
  50% { opacity:1; filter:drop-shadow(0 0 4px currentColor); }
}
@keyframes beup-expiry-value-breathe { 0%,100% { opacity:.72; } 50% { opacity:1; } }
html #app .bpc-card #beup-online-terminal-v1 { margin-top:4px; }
html #app .bpc-card .bpc-traffic { padding:9px 0 8px !important; }
html #app .bpc-card .bpc-reset { padding:8px 0 10px !important; }
@container (max-width:460px) {
  html #app .bpc-card .bpc-title { font-size:18px !important; }
}
@media(max-width:599px) {
  html body #app .storageCard.bpc-card {
    grid-template-columns:minmax(0,1fr) 164px;
    grid-template-rows:54px 40px 82px 6px 40px 116px;
    grid-template-areas:"title expiry" "online online" "traffic traffic" "progress progress" "reset reset" "actions actions";
  }
  html #app .bpc-card .bpc-title {
    align-self:center;
    display:block;
    height:23px;
    overflow:hidden;
    font-size:var(--beup-title-fit-size,18px) !important;
    line-height:23px !important;
    text-overflow:clip;
    white-space:nowrap;
  }
  html #app .bpc-card .bpc-expiry {
    align-self:center;
    justify-self:end;
    width:164px;
    max-width:164px;
    min-width:164px;
    height:34px;
  }
  html #app .bpc-card .beup-expiry-enhanced { box-sizing:border-box; gap:0; padding-left:8px; }
  .beup-expiry-ui { width:100%; height:34px; gap:4px; padding-right:19px; }
  .beup-expiry-heading { gap:0; }
  .beup-expiry-label {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .beup-expiry-icon { flex-basis:22px; width:22px; height:22px; font-size:22px; line-height:22px; }
  .beup-expiry-countdown { flex:1 1 auto; overflow:hidden; flex-wrap:nowrap; justify-content:flex-end; gap:3px; font-size:var(--beup-countdown-fit-size,14px); }
  .beup-expiry-countdown--message { justify-content:flex-end; }
  .beup-expiry-ui[data-expiry-state="permanent"] .beup-expiry-countdown { justify-content:flex-start; }
  .beup-expiry-clock { margin-left:0; padding-left:0; border-left:0; }
}
@media(max-width:359px) {
  html body #app .storageCard.bpc-card {
    grid-template-columns:minmax(0,1fr) 148px;
    grid-template-rows:54px 40px 86px 6px 40px 138px;
    grid-template-areas:"title expiry" "online online" "traffic traffic" "progress progress" "reset reset" "actions actions";
    column-gap:6px;
  }
  html #app .bpc-card .bpc-title { height:20px; font-size:var(--beup-title-fit-size,14px) !important; line-height:20px !important; }
  html #app .bpc-card .bpc-expiry { width:148px; max-width:148px; min-width:148px; }
  html #app .bpc-card .beup-expiry-enhanced { padding-left:6px; }
  .beup-expiry-ui { gap:3px; padding-right:16px; }
  .beup-expiry-icon { flex-basis:20px; width:20px; height:20px; font-size:20px; line-height:20px; }
}
@media(prefers-reduced-motion:reduce) {
  html #app .beup-expiry-ui .beup-expiry-icon,
  html #app .beup-expiry-ui .beup-expiry-countdown,
  html #app .beup-expiry-ui .beup-hourglass-stream { animation:none; }
  .beup-hourglass-top > i,.beup-hourglass-bottom > i { transition:none; }
}

/* Existing clock-outline dial, with the terminal icon's 1.6px rounded stroke. */
.beup-expiry-icon {
  animation:none;
  opacity:1;
  filter:none;
}
.beup-expiry-icon::before {
  content:none;
}
.beup-expiry-ui[data-expiry-state="permanent"] .beup-expiry-label,
.beup-expiry-message-label {
  color:#f7f9fb;
}
.beup-expiry-dial {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.beup-expiry-dial-face {
  fill:currentColor;
  fill-opacity:.12;
}
.beup-expiry-second-hand {
  stroke-width:1;
  opacity:.65;
}
.beup-expiry-ui:is([data-expiry-state="soon"],[data-expiry-state="urgent"]) .beup-expiry-icon {
  animation:beup-expiry-status-breathe 3.2s ease-in-out infinite;
}
.beup-expiry-ui[data-expiry-state="urgent"] .beup-expiry-icon {
  animation-duration:2.4s;
}
@keyframes beup-expiry-status-breathe {
  0%,100% { opacity:.78; }
  50% { opacity:1; }
}
@media(prefers-reduced-motion:reduce) {
  html #app .beup-expiry-ui .beup-expiry-icon { animation:none; }
}