.pv-master-tile {
  position: relative;
  height: 362px;
  min-height: 362px;
  gap: .45rem;
  padding: .85rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
    radial-gradient(ellipse at 18% 0%, rgba(133,211,162,.10), transparent 36%);
}

.pv-master-age-badge {
  position: absolute;
  top: .75rem;
  right: .85rem;
  z-index: 2;
}

.pv-master-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: end;
}

.pv-master-total {
  color: #e8f2ff;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 800;
  line-height: .94;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.28);
}

.pv-master-today {
  min-width: 86px;
  text-align: right;
  position: relative;
  top: 25px;
}

.pv-master-today small {
  display: block;
  color: #9aa3b2;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pv-master-today strong {
  display: block;
  color: #f0c977;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 3px;
  white-space: nowrap;
}

.pv-master-lines {
  position: relative;
  height: 84px;
  margin-top: -.1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.pv-master-lines canvas,
.pv-master-bars canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.pv-master-strings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: .3rem;
  padding: 7px 0;
  min-width: 0;
}

.pv-master-string {
  display: block;
  min-width: 0;
  padding: .35rem .5rem;
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid var(--line-color, var(--accent));
  border-radius: .35rem;
  background: rgba(255,255,255,.03);
}

.pv-master-string span {
  color: #9aa3b2;
  font-size: 10px;
  letter-spacing: 0.04em;
  display: block;
  text-transform: uppercase;
}

.pv-master-string strong {
  color: #f8fbff;
  font-size: 14px;
  font-weight: 700;
  display: block;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-master-bottom {
  display: grid;
  grid-template-columns: minmax(130px, .52fr) minmax(0, 1.48fr);
  gap: .75rem;
  align-items: stretch;
  margin-top: .2rem;
}

.pv-master-battery,
.pv-master-history {
  min-width: 0;
}

.pv-master-ring {
  --value: 0;
  --max: 100;
  width: min(132px, 100%);
  aspect-ratio: 1;
  margin-top: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #11161c 58%, transparent 59%),
    conic-gradient(var(--accent) calc(var(--value) / var(--max) * 360deg), rgba(255,255,255,.11) 0);
  display: grid;
  place-items: center;
  transition: background 700ms ease;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 16px 28px rgba(0,0,0,.22);
}

.pv-master-ring-inner {
  text-align: center;
}

.pv-master-ring-inner strong {
  display: block;
  color: #e8f2ff;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 800;
  line-height: 1;
}

.pv-master-ring-inner small {
  display: block;
  margin-top: .35rem;
  color: #b8bfcc;
  font-size: clamp(13px, 1.1vw, 17px);
}

.pv-master-history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: start;
}

.pv-master-history p {
  margin: 0;
  color: #aeb5c3;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 600;
}

.pv-master-tabs {
  display: flex;
  justify-content: flex-end;
  gap: .3rem;
  flex-wrap: wrap;
}

.pv-master-tabs button {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  color: #aeb5c3;
  font-size: 13px;
  padding: .28rem .68rem;
  cursor: pointer;
  border-radius: 999px;
}

.pv-master-tabs button.active {
  color: #0d1115;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.pv-master-bars {
  height: 118px;
  margin-top: .3rem;
  position: relative;
}

@media (max-width: 900px) {
  .pv-master-bottom {
    grid-template-columns: 1fr;
  }

  .pv-master-ring {
    width: min(132px, 54vw);
  }
}

@media (max-width: 640px) {
  .pv-master-top,
  .pv-master-history-head {
    grid-template-columns: 1fr;
  }

  .pv-master-today {
    justify-content: flex-start;
    text-align: left;
  }
}