.wprsc-wrap{
  --wprsc-label-font: Arial, Helvetica, sans-serif;
  --wprsc-value-font: Georgia, "Times New Roman", serif;
  --wprsc-title: #1a73e8;
  --wprsc-icon: #1a73e8;
  --wprsc-bg: #ffffff;
  --wprsc-border: #4f4f4f;
  --wprsc-radius: 10px;

  --wprsc-label-size: 18px;
  --wprsc-value-size: 44px;
  --wprsc-nowplaying-size: 36px;

  /* Per-card value colors (fallback to green if not set) */
  --wprsc-value-status: #1b6d1b;
  --wprsc-value-bitrate: #1b6d1b;
  --wprsc-value-max_allowed: #1b6d1b;
  --wprsc-value-now_playing: #1b6d1b;
  --wprsc-value-peak: #1b6d1b;
  --wprsc-value-current: #1b6d1b;

  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.wprsc-wrap.wprsc-layout-vertical{
  grid-template-columns: 1fr;
}

.wprsc-card{
  background: var(--wprsc-bg);
  border: 2px solid var(--wprsc-border);
  border-radius: var(--wprsc-radius);
  padding: 14px 12px 18px;
  text-align: center;
  font-family: var(--wprsc-value-font);
  box-sizing: border-box;
}

.wprsc-icon{
  color: var(--wprsc-icon);
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 2px;
  margin-bottom: 6px;
}

.wprsc-icon svg{
  width: 58px;
  height: 58px;
}

.wprsc-label{
  color: var(--wprsc-title);
  font-family: var(--wprsc-label-font);
  font-size: var(--wprsc-label-size);
  font-weight: 600;
  line-height: 1.2;
  margin: 6px 0 10px;
}

.wprsc-value{
  font-size: var(--wprsc-value-size);
  font-weight: 700;
  line-height: 1.05;
  word-break: break-word;
  font-family: var(--wprsc-value-font);
}

.wprsc-card[data-card="status"] .wprsc-label{ font-family: var(--wprsc-label-font-status, var(--wprsc-label-font)); }
.wprsc-card[data-card="bitrate"] .wprsc-label{ font-family: var(--wprsc-label-font-bitrate, var(--wprsc-label-font)); }
.wprsc-card[data-card="max_allowed"] .wprsc-label{ font-family: var(--wprsc-label-font-max_allowed, var(--wprsc-label-font)); }
.wprsc-card[data-card="now_playing"] .wprsc-label{ font-family: var(--wprsc-label-font-now_playing, var(--wprsc-label-font)); }
.wprsc-card[data-card="peak"] .wprsc-label{ font-family: var(--wprsc-label-font-peak, var(--wprsc-label-font)); }
.wprsc-card[data-card="current"] .wprsc-label{ font-family: var(--wprsc-label-font-current, var(--wprsc-label-font)); }

.wprsc-card[data-card="status"] .wprsc-value{ color: var(--wprsc-value-status); font-family: var(--wprsc-value-font-status, var(--wprsc-value-font)); }
.wprsc-card[data-card="bitrate"] .wprsc-value{ color: var(--wprsc-value-bitrate); font-family: var(--wprsc-value-font-bitrate, var(--wprsc-value-font)); }
.wprsc-card[data-card="max_allowed"] .wprsc-value{ color: var(--wprsc-value-max_allowed); font-family: var(--wprsc-value-font-max_allowed, var(--wprsc-value-font)); }
.wprsc-card[data-card="now_playing"] .wprsc-value{ color: var(--wprsc-value-now_playing); font-size: var(--wprsc-nowplaying-size); font-family: var(--wprsc-value-font-now_playing, var(--wprsc-value-font)); }
.wprsc-card[data-card="peak"] .wprsc-value{ color: var(--wprsc-value-peak); font-family: var(--wprsc-value-font-peak, var(--wprsc-value-font)); }
.wprsc-card[data-card="current"] .wprsc-value{ color: var(--wprsc-value-current); font-family: var(--wprsc-value-font-current, var(--wprsc-value-font)); }

.wprsc-offline .wprsc-value{
  color: #d63638 !important;
}

@media (max-width: 480px){
  .wprsc-wrap{ grid-template-columns: 1fr; }
  .wprsc-value{ font-size: calc(var(--wprsc-value-size) - 4px); }
  .wprsc-card[data-card="now_playing"] .wprsc-value{ font-size: calc(var(--wprsc-nowplaying-size) - 6px); }
}