/* Template UI extras (scoped) */
.ws40-color-wrap{position:relative;display:inline-block;vertical-align:middle;margin-right:10px}
.ws40-color-wrap summary{list-style:none;cursor:pointer;display:inline-flex;gap:8px;align-items:center;padding:4px 8px;border:1px solid #c3c4c7;border-radius:8px;background:#fff}
.ws40-color-wrap summary::-webkit-details-marker{display:none}
.ws40-color-swatch{width:22px;height:22px;border-radius:6px;border:1px solid #c3c4c7;display:inline-block}
.ws40-color-pop{position:absolute;z-index:20;top:34px;left:0;background:#fff;border:1px solid #c3c4c7;border-radius:10px;padding:10px;box-shadow:0 8px 22px rgba(0,0,0,.12);min-width:220px}
.ws40-color-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.ws40-color-native{width:44px;height:32px;padding:0;border:0;background:none}
.ws40-color-hex{width:120px}

#ws40-fields-sortable .ws40-drag{cursor:grab}
#ws40-fields-sortable .ws40-field-item{cursor:default}
.ws40-bubble-handle,.ws40-card-handle{cursor:grab;user-select:none}

/* Bubble v2: per-field controls */
.ws40-field-controls{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:center;
}
.ws40-mini{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.ws40-mini span{
  opacity:.75;
}
.ws40-mini select{
  min-width:140px;
}
.ws40-mini-check{
  gap:6px;
}

/* Bubble v2 STEP C: ranges / thresholds UI */
.ws40-range{margin-top:8px}
.ws40-range > summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:12px;opacity:.85}
.ws40-range > summary::-webkit-details-marker{display:none}
.ws40-range > summary:before{content:'▸';display:inline-block;transform:translateY(-1px)}
.ws40-range[open] > summary:before{content:'▾'}
.ws40-range-body{margin-top:10px;padding:10px 12px;border:1px solid #dcdcde;border-radius:10px;background:#fff}
.ws40-range-grid{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:10px 12px;align-items:start}
.ws40-range-col strong{display:block;margin-bottom:6px;font-size:12px}
.ws40-range-row{display:flex;gap:10px}
.ws40-range-row label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.ws40-range-row input{width:100px}
@media (max-width: 1200px){
  .ws40-range-grid{grid-template-columns:1fr}
  .ws40-range-row input{width:140px}
}

/* ==== WS40 Bubble v4: cleaner grid, lighter hierarchy, reduced chaos ==== */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble {
  position: relative;
  min-height: 150px;
  border-radius: 50%;
  box-sizing: border-box;
  margin: 0 auto;
  width: 150px;
  height: 150px;
  /* REMOVED: hardcoded colors now use CSS variables from inline styles
  background: radial-gradient(circle at 35% 30%, #f7f7f7 0%, #efefef 62%, #e4e4e4 100%);
  border: 4px solid rgba(255,255,255,.58);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10);
  color: #27303f;
  */
  overflow: hidden;
}

/* only key metrics may be larger, but still aligned to the grid */
.ws40-bubble-card.is-primary,
.ws40-bubble.is-primary,
.ws40-card-bubble.is-primary {
  width: 180px;
  height: 180px;
}

.ws40-bubble-card.is-primary,
.ws40-bubble.is-primary,
.ws40-card-bubble.is-primary {
  justify-self: center;
}

.ws40-bubble-card.is-neutral,
.ws40-bubble.is-neutral,
.ws40-card-bubble.is-neutral {
  border-color: rgba(255,255,255,.55);
}

.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0f0f0 0%, #e7e7e7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 12px;
  z-index: 2;
}

.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 8px;
  color: #384150;
  max-width: 88%;
}

.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #1e2633;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: 11px;
  font-weight: 600;
  opacity: .8;
}

.ws40-bubble-card.is-primary .ws40-bubble-value,
.ws40-bubble.is-primary .ws40-bubble-value,
.ws40-card-bubble.is-primary .ws40-bubble-value {
  font-size: 24px;
}

.ws40-bubble-gauge,
.ws40-gauge,
.ws40-bubble-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
}

/* calmer gauge ring */
.ws40-bubble-gauge::before,
.ws40-gauge::before,
.ws40-bubble-arc::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 12px solid #d6dae2;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
  opacity: .85;
}

.ws40-bubble-card:not(.has-gauge) .ws40-bubble-gauge,
.ws40-bubble:not(.has-gauge) .ws40-bubble-gauge,
.ws40-card-bubble:not(.has-gauge) .ws40-bubble-gauge,
.ws40-bubble-card:not(.has-gauge) .ws40-gauge,
.ws40-bubble:not(.has-gauge) .ws40-gauge,
.ws40-card-bubble:not(.has-gauge) .ws40-gauge,
.ws40-bubble-card:not(.has-gauge) .ws40-bubble-arc,
.ws40-bubble:not(.has-gauge) .ws40-bubble-arc,
.ws40-card-bubble:not(.has-gauge) .ws40-bubble-arc {
  display: none;
}

/* category accents: only a subtle ring + value/icon tint */
.ws40-bubble-card.ws40-cat-temp,
.ws40-bubble.ws40-cat-temp,
.ws40-card-bubble.ws40-cat-temp { box-shadow: inset 0 0 0 3px rgba(231,76,60,.18), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10); }
.ws40-bubble-card.ws40-cat-humidity,
.ws40-bubble.ws40-cat-humidity,
.ws40-card-bubble.ws40-cat-humidity { box-shadow: inset 0 0 0 3px rgba(52,101,255,.15), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10); }
.ws40-bubble-card.ws40-cat-wind,
.ws40-bubble.ws40-cat-wind,
.ws40-card-bubble.ws40-cat-wind { box-shadow: inset 0 0 0 3px rgba(16,128,120,.15), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10); }
.ws40-bubble-card.ws40-cat-rain,
.ws40-bubble.ws40-cat-rain,
.ws40-card-bubble.ws40-cat-rain { box-shadow: inset 0 0 0 3px rgba(46,89,230,.14), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10); }
.ws40-bubble-card.ws40-cat-pressure,
.ws40-bubble.ws40-cat-pressure,
.ws40-card-bubble.ws40-cat-pressure { box-shadow: inset 0 0 0 3px rgba(93,108,130,.14), inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(0,0,0,.10); }

/* optional section titles */
.ws40-bubble-section-title {
  grid-column: 1 / -1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  margin: 2px 0 -6px;
}

@media (max-width: 900px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 14px;
  }
  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble {
    width: 140px;
    height: 140px;
    min-height: 140px;
  }
  .ws40-bubble-card.is-primary,
  .ws40-bubble.is-primary,
  .ws40-card-bubble.is-primary {
    width: 160px;
    height: 160px;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - uniform size, grouped by category color ==== */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  align-items: stretch;
  justify-items: center;
}

.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  margin: 0 auto !important;
  border-radius: 50%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #f8f8f8 0%, #efefef 62%, #e5e5e5 100%);
  border: 4px solid rgba(255,255,255,.60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
  color: #243042;
}

.ws40-bubble-card.is-primary,
.ws40-bubble.is-primary,
.ws40-card-bubble.is-primary,
.ws40-bubble-card.is-secondary,
.ws40-bubble.is-secondary,
.ws40-card-bubble.is-secondary,
.ws40-bubble-card.is-neutral,
.ws40-bubble.is-neutral,
.ws40-card-bubble.is-neutral {
  width: 150px !important;
  height: 150px !important;
}

.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f0f0f0 0%, #e7e7e7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 12px;
  z-index: 2;
}

.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  font-size: 14px;
  line-height: 1.18;
  font-weight: 500;
  color: #384150;
  margin-bottom: 8px;
  max-width: 88%;
}

.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  font-size: 18px !important;
  line-height: 1;
  font-weight: 700;
  color: #1e2633;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
}

.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: 11px;
  font-weight: 600;
  opacity: .82;
}

.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon {
  display: block;
  margin-bottom: 8px;
  opacity: .95;
}

/* No visual hierarchy: same size for all */
.ws40-bubble-card.is-primary .ws40-bubble-value,
.ws40-bubble.is-primary .ws40-bubble-value,
.ws40-card-bubble.is-primary .ws40-bubble-value,
.ws40-bubble-card.is-secondary .ws40-bubble-value,
.ws40-bubble.is-secondary .ws40-bubble-value,
.ws40-card-bubble.is-secondary .ws40-bubble-value {
  font-size: 18px !important;
}

/* Gauge disabled globally for this provisional uniform build */
.ws40-bubble-gauge,
.ws40-gauge,
.ws40-bubble-arc {
  display: none !important;
}

/* Category color groups */
.ws40-bubble-card.ws40-cat-temp,
.ws40-bubble.ws40-cat-temp,
.ws40-card-bubble.ws40-cat-temp {
  box-shadow: inset 0 0 0 4px rgba(231,76,60,.22), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-humidity,
.ws40-bubble.ws40-cat-humidity,
.ws40-card-bubble.ws40-cat-humidity {
  box-shadow: inset 0 0 0 4px rgba(52,101,255,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-wind,
.ws40-bubble.ws40-cat-wind,
.ws40-card-bubble.ws40-cat-wind {
  box-shadow: inset 0 0 0 4px rgba(18,135,126,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-rain,
.ws40-bubble.ws40-cat-rain,
.ws40-card-bubble.ws40-cat-rain {
  box-shadow: inset 0 0 0 4px rgba(39,88,219,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-pressure,
.ws40-bubble.ws40-cat-pressure,
.ws40-card-bubble.ws40-cat-pressure {
  box-shadow: inset 0 0 0 4px rgba(95,108,126,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-direction,
.ws40-bubble.ws40-cat-direction,
.ws40-card-bubble.ws40-cat-direction {
  box-shadow: inset 0 0 0 4px rgba(142,99,196,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}
.ws40-bubble-card.ws40-cat-datetime,
.ws40-bubble.ws40-cat-datetime,
.ws40-card-bubble.ws40-cat-datetime {
  box-shadow: inset 0 0 0 4px rgba(210,130,34,.22), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10);
}

.ws40-cat-temp .ws40-bubble-value, .ws40-cat-temp .ws40-bubble-unit, .ws40-cat-temp .ws40-bubble-icon { color: #df4f43; }
.ws40-cat-humidity .ws40-bubble-value, .ws40-cat-humidity .ws40-bubble-unit, .ws40-cat-humidity .ws40-bubble-icon { color: #2e62e8; }
.ws40-cat-wind .ws40-bubble-value, .ws40-cat-wind .ws40-bubble-unit, .ws40-cat-wind .ws40-bubble-icon { color: #157f74; }
.ws40-cat-rain .ws40-bubble-value, .ws40-cat-rain .ws40-bubble-unit, .ws40-cat-rain .ws40-bubble-icon { color: #2856db; }
.ws40-cat-pressure .ws40-bubble-value, .ws40-cat-pressure .ws40-bubble-unit, .ws40-cat-pressure .ws40-bubble-icon { color: #556277; }
.ws40-cat-direction .ws40-bubble-value, .ws40-cat-direction .ws40-bubble-unit, .ws40-cat-direction .ws40-bubble-icon { color: #8b5bd1; }
.ws40-cat-datetime .ws40-bubble-value, .ws40-cat-datetime .ws40-bubble-unit, .ws40-cat-datetime .ws40-bubble-icon { color: #c47a1a; }

@media (max-width: 900px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
  }
  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - values raised + slim gauge restored ==== */

/* keep cards uniform and stable */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble {
  position: relative !important;
  overflow: hidden !important;
}

/* restore a thin gauge ring aligned to current border size */
.ws40-bubble-gauge,
.ws40-gauge,
.ws40-bubble-arc {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* neutral track */
.ws40-bubble-gauge::before,
.ws40-gauge::before,
.ws40-bubble-arc::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  border: 12px solid rgba(205, 211, 220, 0.92) !important;
  z-index: 1 !important;
}

/* colored progress arc generated by JS via conic-gradient */
.ws40-bubble-gauge::after,
.ws40-gauge::after,
.ws40-bubble-arc::after {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 50% !important;
  background: conic-gradient(
    from -135deg,
    var(--ws40-gauge-color, rgba(120,120,120,.65)) 0deg,
    var(--ws40-gauge-color, rgba(120,120,120,.65)) var(--ws40-gauge-angle, 180deg),
    transparent var(--ws40-gauge-angle, 180deg),
    transparent 360deg
  ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px)) !important;
  z-index: 2 !important;
  opacity: .98 !important;
}

/* keep inner disk above gauge and centered */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner {
  inset: 14px !important;
  z-index: 3 !important;
  padding: 10px 12px 22px !important;
  justify-content: flex-start !important;
}

/* icon centered and stable */
.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon,
.ws40-bubble .dashicons,
.ws40-bubble .ws40-icon,
.ws40-card-bubble .dashicons,
.ws40-card-bubble .ws40-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 8px auto !important;
  line-height: 1 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

/* labels remain centered */
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  margin: 0 auto 10px auto !important;
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* move values higher than before */
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  margin-top: -2px !important;
  transform: translateY(-6px) !important;
  min-height: 24px !important;
}

/* units align nicely and do not sink */
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  position: relative !important;
  top: -1px !important;
}

/* date/time bubble slightly smaller typography to avoid collisions */
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .value,
.ws40-cat-datetime .ws40-bubble-number {
  font-size: 15px !important;
  line-height: 1.2 !important;
  transform: translateY(-3px) !important;
  max-width: 92% !important;
}

/* ensure no content overlaps at smaller widths */
@media (max-width: 900px) {
  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner {
    padding: 10px 10px 20px !important;
  }

  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    min-height: 30px !important;
    font-size: 13px !important;
  }

  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 17px !important;
  }

  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .value,
  .ws40-cat-datetime .ws40-bubble-number {
    font-size: 14px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - unit size normalized, values centered, safer gauge spacing ==== */

/* more breathing room between inner content and gauge ring */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner {
  inset: 18px !important;
  padding: 12px 12px 18px !important;
}

/* labels centered consistently */
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 0 auto 10px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* values perfectly centered and with stable line box */
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  width: 100% !important;
  min-height: 28px !important;
  margin: 0 auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  line-height: 1.05 !important;
}

/* all units same size and stable on every category */
.ws40-bubble-unit,
.ws40-bubble-card .unit,
.ws40-cat-temp .ws40-bubble-unit,
.ws40-cat-humidity .ws40-bubble-unit,
.ws40-cat-wind .ws40-bubble-unit,
.ws40-cat-rain .ws40-bubble-unit,
.ws40-cat-pressure .ws40-bubble-unit,
.ws40-cat-direction .ws40-bubble-unit,
.ws40-cat-datetime .ws40-bubble-unit {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  vertical-align: baseline !important;
  display: inline-block !important;
  opacity: .9 !important;
}

/* normalize value sizes too, except datetime where text is naturally longer */
.ws40-bubble-card .ws40-bubble-value,
.ws40-bubble .ws40-bubble-value,
.ws40-card-bubble .ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble .value,
.ws40-card-bubble .value,
.ws40-bubble-number {
  font-size: 18px !important;
}

.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .value,
.ws40-cat-datetime .ws40-bubble-number {
  font-size: 14px !important;
  line-height: 1.18 !important;
}

/* icons centered on the real middle axis */
.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon,
.ws40-bubble .dashicons,
.ws40-bubble .ws40-icon,
.ws40-card-bubble .dashicons,
.ws40-card-bubble .ws40-icon {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 8px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* thinner and more distant gauge so it does not crash into text */
.ws40-bubble-gauge::before,
.ws40-gauge::before,
.ws40-bubble-arc::before {
  inset: 6px !important;
  border-width: 10px !important;
}

.ws40-bubble-gauge::after,
.ws40-gauge::after,
.ws40-bubble-arc::after {
  inset: 6px !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px)) !important;
}

/* better centering for long pressure/direction/date strings */
.ws40-cat-pressure .ws40-bubble-value,
.ws40-cat-pressure .value,
.ws40-cat-direction .ws40-bubble-value,
.ws40-cat-direction .value,
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .value {
  letter-spacing: 0 !important;
}

/* keep frontend/admin preview coherent on smaller screens too */
@media (max-width: 900px) {
  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner {
    inset: 16px !important;
    padding: 10px 10px 16px !important;
  }

  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 17px !important;
    gap: 5px !important;
  }

  .ws40-bubble-unit,
  .ws40-bubble-card .unit {
    font-size: 11px !important;
  }

  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .value,
  .ws40-cat-datetime .ws40-bubble-number {
    font-size: 13px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - coherent gauges + unit size equals value size ==== */

/* same visual size for value and unit, as requested */
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* longer datetime text kept readable */
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .value,
.ws40-cat-datetime .ws40-bubble-number,
.ws40-cat-datetime .ws40-bubble-unit,
.ws40-cat-datetime .unit {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

/* keep pressure and direction values on the same alignment */
.ws40-cat-pressure .ws40-bubble-value,
.ws40-cat-pressure .value,
.ws40-cat-direction .ws40-bubble-value,
.ws40-cat-direction .value {
  letter-spacing: 0 !important;
}

/* slightly more inner breathing room */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner {
  inset: 20px !important;
  padding: 10px 12px 16px !important;
}

/* thin consistent gauge, pushed outward */
.ws40-bubble-gauge::before,
.ws40-gauge::before,
.ws40-bubble-arc::before {
  inset: 4px !important;
  border-width: 9px !important;
  border-color: rgba(205, 211, 220, 0.88) !important;
}

.ws40-bubble-gauge::after,
.ws40-gauge::after,
.ws40-bubble-arc::after {
  inset: 4px !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
}

/* remove harsh pink highlight on yearly rain bubble */
.ws40-cat-rain {
  box-shadow: inset 0 0 0 4px rgba(39,88,219,.20), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10) !important;
}

/* trend cards stay semantically lighter */
.ws40-bubble-card.ws40-is-trend,
.ws40-bubble.ws40-is-trend,
.ws40-card-bubble.ws40-is-trend {
  box-shadow: inset 0 0 0 4px rgba(170, 176, 186, .18), inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10) !important;
}

@media (max-width: 900px) {
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number,
  .ws40-bubble-unit,
  .ws40-bubble-card .unit {
    font-size: 17px !important;
  }

  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .value,
  .ws40-cat-datetime .ws40-bubble-number,
  .ws40-cat-datetime .ws40-bubble-unit,
  .ws40-cat-datetime .unit {
    font-size: 13px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - native PHP gauge rendering fix ==== */

/* grid remains responsive in admin preview and frontend */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 150px)) !important;
  gap: 18px !important;
  justify-content: start !important;
  align-items: start !important;
}

/* main bubble shell */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  min-height: 150px !important;
  max-width: 150px !important;
  max-height: 150px !important;
  border-radius: 50% !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 35% 30%, #f8f8f8 0%, #efefef 62%, #e5e5e5 100%) !important;
  border: 4px solid rgba(255,255,255,.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px rgba(0,0,0,.10) !important;
  color: #243042 !important;
  margin: 0 !important;
}

/* native PHP gauge layer using CSS variables set inline by renderer */
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border-radius: 50% !important;
  background:
    conic-gradient(
      from -135deg,
      var(--ws40-gauge-color, #4a5a70) 0deg,
      var(--ws40-gauge-color, #4a5a70) calc(var(--ws40-gauge-pct, .35) * 270deg),
      rgba(205, 211, 220, 0.88) calc(var(--ws40-gauge-pct, .35) * 270deg),
      rgba(205, 211, 220, 0.88) 270deg,
      transparent 270deg,
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* if there is no instrument, do not paint gauge */
.ws40-bub:not(.has-instrument)::before,
.ws40-bubble-card:not(.has-instrument)::before,
.ws40-bubble:not(.has-instrument)::before,
.ws40-card-bubble:not(.has-instrument)::before {
  display: none !important;
}

/* inner content area above gauge */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  position: absolute !important;
  inset: 20px !important;
  border-radius: 50% !important;
  background: linear-gradient(180deg, #f0f0f0 0%, #e7e7e7 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 10px 12px 16px !important;
  z-index: 2 !important;
}

/* native value wrappers from PHP renderer */
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  width: 100% !important;
  margin: 0 auto !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 1.05 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* native inline unit markup */
.ws40-bub-unit,
.ws40-bub-unit-inline,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  display: inline-block !important;
  opacity: .95 !important;
}

/* native labels */
.ws40-bub-label,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 34px !important;
  margin: 0 auto 10px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
  color: #384150 !important;
}

/* icons centered */
.ws40-bub-icon,
.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon,
.ws40-bubble .dashicons,
.ws40-bubble .ws40-icon,
.ws40-card-bubble .dashicons,
.ws40-card-bubble .ws40-icon {
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 8px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

/* semantic states from native renderer */
.ws40-alert-warning,
.ws40-state-warning { --ws40-gauge-color: #f0a000 !important; }
.ws40-alert-danger,
.ws40-state-danger { --ws40-gauge-color: #ef4b45 !important; }
.ws40-alert-ok,
.ws40-state-ok { --ws40-gauge-color: #2e62e8 !important; }

/* category colors still apply to text/icons only */
.ws40-cat-temp .ws40-bub-val, .ws40-cat-temp .ws40-bub-unit-inline, .ws40-cat-temp .ws40-bub-icon,
.ws40-cat-temp .ws40-bubble-value, .ws40-cat-temp .ws40-bubble-unit, .ws40-cat-temp .ws40-bubble-icon { color: #df4f43 !important; }
.ws40-cat-humidity .ws40-bub-val, .ws40-cat-humidity .ws40-bub-unit-inline, .ws40-cat-humidity .ws40-bub-icon,
.ws40-cat-humidity .ws40-bubble-value, .ws40-cat-humidity .ws40-bubble-unit, .ws40-cat-humidity .ws40-bubble-icon { color: #2e62e8 !important; }
.ws40-cat-wind .ws40-bub-val, .ws40-cat-wind .ws40-bub-unit-inline, .ws40-cat-wind .ws40-bub-icon,
.ws40-cat-wind .ws40-bubble-value, .ws40-cat-wind .ws40-bubble-unit, .ws40-cat-wind .ws40-bubble-icon { color: #157f74 !important; }
.ws40-cat-rain .ws40-bub-val, .ws40-cat-rain .ws40-bub-unit-inline, .ws40-cat-rain .ws40-bub-icon,
.ws40-cat-rain .ws40-bubble-value, .ws40-cat-rain .ws40-bubble-unit, .ws40-cat-rain .ws40-bubble-icon { color: #2856db !important; }
.ws40-cat-pressure .ws40-bub-val, .ws40-cat-pressure .ws40-bub-unit-inline, .ws40-cat-pressure .ws40-bub-icon,
.ws40-cat-pressure .ws40-bubble-value, .ws40-cat-pressure .ws40-bubble-unit, .ws40-cat-pressure .ws40-bubble-icon { color: #556277 !important; }
.ws40-cat-direction .ws40-bub-val, .ws40-cat-direction .ws40-bub-unit-inline, .ws40-cat-direction .ws40-bub-icon,
.ws40-cat-direction .ws40-bubble-value, .ws40-cat-direction .ws40-bubble-unit, .ws40-cat-direction .ws40-bubble-icon { color: #7a42f4 !important; }
.ws40-cat-datetime .ws40-bub-val, .ws40-cat-datetime .ws40-bub-unit-inline, .ws40-cat-datetime .ws40-bub-icon,
.ws40-cat-datetime .ws40-bubble-value, .ws40-cat-datetime .ws40-bubble-unit, .ws40-cat-datetime .ws40-bubble-icon { color: #c47a1a !important; }

/* datetime remains smaller because humans insist on using full dates inside circles */
.ws40-cat-datetime .ws40-bub-val,
.ws40-cat-datetime .ws40-bub-unit-inline,
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .ws40-bubble-unit {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

@media (max-width: 900px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 140px)) !important;
    gap: 14px !important;
  }
  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    width: 140px !important;
    height: 140px !important;
    min-width: 140px !important;
    min-height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner,
  .ws40-bub-inner,
  .ws40-bub-body {
    inset: 18px !important;
    padding: 10px 10px 16px !important;
  }
  .ws40-bub-val, .ws40-bub-unit-inline, .ws40-bubble-value, .ws40-bubble-unit { font-size: 17px !important; }
  .ws40-cat-datetime .ws40-bub-val,
  .ws40-cat-datetime .ws40-bub-unit-inline,
  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .ws40-bubble-unit { font-size: 13px !important; }
}

/* ==== WS40 Bubble v05.05.90.2 - responsive fix ==== */

/* Let the container adapt instead of forcing fixed-width tracks */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: start !important;
}

/* Keep bubbles equal, but allow them to scale down on smaller screens/columns */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  width: min(150px, 100%) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 150px !important;
  max-height: none !important;
  justify-self: center !important;
}

/* Native PHP and custom inner wrappers remain proportionate */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  inset: clamp(16px, 10%, 20px) !important;
}

/* Medium screens: 3-4 bubbles per row depending on available width */
@media (max-width: 1100px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 16px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 140px !important;
  }
}

/* Tablet */
@media (max-width: 800px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
    gap: 14px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 126px !important;
  }

  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner,
  .ws40-bub-inner,
  .ws40-bub-body {
    inset: 14px !important;
    padding: 8px 10px 14px !important;
  }

  .ws40-bub-label,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 13px !important;
    min-height: 28px !important;
    margin-bottom: 8px !important;
  }

  .ws40-bub-val,
  .ws40-bub-unit-inline,
  .ws40-bubble-value,
  .ws40-bubble-unit,
  .ws40-bubble-card .value,
  .ws40-bubble-card .unit,
  .ws40-bubble-number {
    font-size: 16px !important;
  }

  .ws40-bub-icon,
  .ws40-bubble-icon,
  .ws40-bubble-card .dashicons,
  .ws40-bubble-card .ws40-icon,
  .ws40-bubble .dashicons,
  .ws40-bubble .ws40-icon,
  .ws40-card-bubble .dashicons,
  .ws40-card-bubble .ws40-icon {
    width: 24px !important;
    height: 24px !important;
    margin-bottom: 6px !important;
  }
}

/* Phones */
@media (max-width: 560px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 118px !important;
  }

  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner,
  .ws40-bub-inner,
  .ws40-bub-body {
    inset: 13px !important;
    padding: 8px 8px 12px !important;
  }

  .ws40-bub-label,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 12px !important;
    min-height: 24px !important;
    line-height: 1.15 !important;
  }

  .ws40-bub-val,
  .ws40-bub-unit-inline,
  .ws40-bubble-value,
  .ws40-bubble-unit,
  .ws40-bubble-card .value,
  .ws40-bubble-card .unit,
  .ws40-bubble-number {
    font-size: 14px !important;
    gap: 3px !important;
  }

  .ws40-cat-datetime .ws40-bub-val,
  .ws40-cat-datetime .ws40-bub-unit-inline,
  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .ws40-bubble-unit {
    font-size: 12px !important;
  }

  .ws40-bub-icon,
  .ws40-bubble-icon,
  .ws40-bubble-card .dashicons,
  .ws40-bubble-card .ws40-icon,
  .ws40-bubble .dashicons,
  .ws40-bubble .ws40-icon,
  .ws40-card-bubble .dashicons,
  .ws40-card-bubble .ws40-icon {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 5px !important;
  }
}

/* Very small phones: one bubble per row instead of breaking layout */
@media (max-width: 320px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 140px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - real responsive fix ==== */

/* Responsive container that truly adapts to available width */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-items: center !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

/* Remove rigid sizing that was breaking phones */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  width: 100% !important;
  max-width: 150px !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  justify-self: center !important;
  box-sizing: border-box !important;
}

/* Let inner content scale with the bubble */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  inset: auto !important;
  position: absolute !important;
  top: clamp(12px, 8%, 20px) !important;
  right: clamp(12px, 8%, 20px) !important;
  bottom: clamp(12px, 8%, 20px) !important;
  left: clamp(12px, 8%, 20px) !important;
  padding: clamp(8px, 2vw, 16px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Scale labels, values and units fluidly */
.ws40-bub-label,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  font-size: clamp(11px, 2vw, 14px) !important;
  line-height: 1.15 !important;
  min-height: 0 !important;
  margin: 0 auto 6px auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}

.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  font-size: clamp(14px, 2.5vw, 18px) !important;
  line-height: 1.05 !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: center !important;
  flex-wrap: wrap !important;
}

.ws40-bub-unit,
.ws40-bub-unit-inline,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: clamp(12px, 2vw, 16px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  display: inline-block !important;
  opacity: .95 !important;
}

.ws40-cat-datetime .ws40-bub-val,
.ws40-cat-datetime .ws40-bub-unit-inline,
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .ws40-bubble-unit {
  font-size: clamp(11px, 1.8vw, 14px) !important;
  line-height: 1.1 !important;
}

/* Icons fluid too */
.ws40-bub-icon,
.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon,
.ws40-bubble .dashicons,
.ws40-bubble .ws40-icon,
.ws40-card-bubble .dashicons,
.ws40-card-bubble .ws40-icon {
  width: clamp(18px, 3vw, 28px) !important;
  height: clamp(18px, 3vw, 28px) !important;
  margin: 0 auto 6px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}

/* Keep native gauge ring proportional and out of the text */
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  inset: clamp(3px, 2%, 5px) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - clamp(8px, 6%, 10px)), #000 calc(100% - clamp(8px, 6%, 10px))) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - clamp(8px, 6%, 10px)), #000 calc(100% - clamp(8px, 6%, 10px))) !important;
}

/* Medium tablets */
@media (max-width: 900px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 10px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 135px !important;
  }
}

/* Phones */
@media (max-width: 560px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 120px !important;
  }
}

/* Very small phones */
@media (max-width: 340px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 140px !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - narrow mobile frontend fix ==== */

/* Phone widths around 280-430px were still overcrowded. Tighten everything decisively. */
@media (max-width: 430px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(2, minmax(88px, 1fr)) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    width: 100% !important;
    max-width: 100px !important;
    min-width: 88px !important;
  }

  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner,
  .ws40-bub-inner,
  .ws40-bub-body {
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;
    padding: 6px 6px 10px !important;
  }

  .ws40-bub-label,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
    line-height: 1.08 !important;
    margin: 0 auto 4px auto !important;
    min-height: 0 !important;
    max-width: 92% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 12px !important;
    line-height: 1 !important;
    gap: 2px !important;
    max-width: 100% !important;
  }

  .ws40-bub-unit,
  .ws40-bub-unit-inline,
  .ws40-bubble-unit,
  .ws40-bubble-card .unit {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .ws40-cat-datetime .ws40-bub-val,
  .ws40-cat-datetime .ws40-bub-unit-inline,
  .ws40-cat-datetime .ws40-bubble-value,
  .ws40-cat-datetime .ws40-bubble-unit {
    font-size: 10px !important;
  }

  .ws40-bub-icon,
  .ws40-bubble-icon,
  .ws40-bubble-card .dashicons,
  .ws40-bubble-card .ws40-icon,
  .ws40-bubble .dashicons,
  .ws40-bubble .ws40-icon,
  .ws40-card-bubble .dashicons,
  .ws40-card-bubble .ws40-icon {
    width: 16px !important;
    height: 16px !important;
    margin: 0 auto 4px auto !important;
  }

  .ws40-bub.has-instrument::before,
  .ws40-bub.ws40-has-gauge::before,
  .ws40-bubble-card.has-instrument::before,
  .ws40-bubble.has-instrument::before,
  .ws40-card-bubble.has-instrument::before {
    inset: 2px !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)) !important;
  }
}

/* Truly tiny devices: single column is better than unreadable circles */
@media (max-width: 300px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 118px !important;
    min-width: 0 !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - mobile width strategy per user request ==== */

/* Under 430px: keep desktop bubble size, do not shrink circles */
@media (max-width: 430px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-items: center !important;
    align-items: start !important;
    width: 100% !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    width: 100% !important;
    max-width: 150px !important;   /* same as desktop */
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    justify-self: center !important;
  }

  /* keep inner spacing similar to desktop */
  .ws40-bubble-card .ws40-bubble-inner,
  .ws40-bubble .ws40-bubble-inner,
  .ws40-card-bubble .ws40-bubble-inner,
  .ws40-bub-inner,
  .ws40-bub-body {
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    padding: 8px 8px 12px !important;
  }

  /* keep text readable, but do not over-compress */
  .ws40-bub-label,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 11px !important;
    line-height: 1.12 !important;
    margin: 0 auto 5px auto !important;
    max-width: 92% !important;
    min-height: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 14px !important;
    line-height: 1.02 !important;
    gap: 2px !important;
    max-width: 100% !important;
  }

  .ws40-bub-unit,
  .ws40-bub-unit-inline,
  .ws40-bubble-unit,
  .ws40-bubble-card .unit {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  .ws40-bub-icon,
  .ws40-bubble-icon,
  .ws40-bubble-card .dashicons,
  .ws40-bubble-card .ws40-icon,
  .ws40-bubble .dashicons,
  .ws40-bubble .ws40-icon,
  .ws40-card-bubble .dashicons,
  .ws40-card-bubble .ws40-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto 4px auto !important;
  }

  .ws40-bub.has-instrument::before,
  .ws40-bub.ws40-has-gauge::before,
  .ws40-bubble-card.has-instrument::before,
  .ws40-bubble.has-instrument::before,
  .ws40-card-bubble.has-instrument::before {
    inset: 3px !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)) !important;
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)) !important;
  }
}

/* Under 300px: single column only */
@media (max-width: 300px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ws40-bubble-card,
  .ws40-bubble,
  .ws40-card-bubble,
  .ws40-bub {
    max-width: 150px !important;   /* same as desktop */
    width: 100% !important;
    justify-self: center !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - fixed bubble size, responsive columns only ==== */

/* Base rule: bubbles NEVER resize */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  height: 150px !important;
  min-height: 150px !important;
  max-height: 150px !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: center !important;
  box-sizing: border-box !important;
}

/* Keep inner layout stable too */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  top: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  left: 12px !important;
  padding: 8px 8px 12px !important;
}

/* Container uses fixed columns based on available width, not bubble shrinking */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, 150px) !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Phones under 430px: still fixed bubbles, just 2 columns if possible */
@media (max-width: 430px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: repeat(2, 150px) !important;
    gap: 10px !important;
    overflow-x: auto !important;
    justify-content: start !important;
    padding-bottom: 4px !important;
  }
}

/* Very narrow phones: exactly one column, same bubble size */
@media (max-width: 300px) {
  .ws40-bubble-grid,
  .ws40-template-bubble,
  .ws40-bubbles,
  .ws40-bubble-wrap,
  .ws40-bubble-preview {
    grid-template-columns: 150px !important;
    justify-content: center !important;
    overflow-x: visible !important;
  }
}

/* ==== WS40 Bubble v05.05.90.2 - single row responsive to container width ==== */

/* One single row. Bubble size is computed from the actual container width. */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  --ws40-bubble-size: 120px;
  --ws40-bubble-gap: 10px;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--ws40-bubble-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

/* Every bubble keeps the same computed size within the row */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  flex: 0 0 var(--ws40-bubble-size) !important;
  width: var(--ws40-bubble-size) !important;
  min-width: var(--ws40-bubble-size) !important;
  max-width: var(--ws40-bubble-size) !important;
  height: var(--ws40-bubble-size) !important;
  min-height: var(--ws40-bubble-size) !important;
  max-height: var(--ws40-bubble-size) !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Inner spacing scales with the computed size */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  top: calc(var(--ws40-bubble-size) * 0.08) !important;
  right: calc(var(--ws40-bubble-size) * 0.08) !important;
  bottom: calc(var(--ws40-bubble-size) * 0.08) !important;
  left: calc(var(--ws40-bubble-size) * 0.08) !important;
  padding: calc(var(--ws40-bubble-size) * 0.05) !important;
  overflow: hidden !important;
}

/* Text and icons scale with the same bubble size */
.ws40-bub-label,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  font-size: clamp(10px, calc(var(--ws40-bubble-size) * 0.12), 14px) !important;
  line-height: 1.1 !important;
  margin: 0 auto calc(var(--ws40-bubble-size) * 0.03) auto !important;
  min-height: 0 !important;
  max-width: 92% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  font-size: clamp(12px, calc(var(--ws40-bubble-size) * 0.16), 18px) !important;
  line-height: 1 !important;
  gap: 2px !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

.ws40-bub-unit,
.ws40-bub-unit-inline,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: clamp(10px, calc(var(--ws40-bubble-size) * 0.11), 16px) !important;
  line-height: 1 !important;
}

.ws40-bub-icon,
.ws40-bubble-icon,
.ws40-bubble-card .dashicons,
.ws40-bubble-card .ws40-icon,
.ws40-bubble .dashicons,
.ws40-bubble .ws40-icon,
.ws40-card-bubble .dashicons,
.ws40-card-bubble .ws40-icon {
  width: clamp(16px, calc(var(--ws40-bubble-size) * 0.18), 28px) !important;
  height: clamp(16px, calc(var(--ws40-bubble-size) * 0.18), 28px) !important;
  margin: 0 auto calc(var(--ws40-bubble-size) * 0.03) auto !important;
}

/* Gauge ring scales with bubble size too */
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  inset: calc(var(--ws40-bubble-size) * 0.02) !important;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - max(6px, calc(var(--ws40-bubble-size) * 0.055))),
    #000 calc(100% - max(6px, calc(var(--ws40-bubble-size) * 0.055)))
  ) !important;
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - max(6px, calc(var(--ws40-bubble-size) * 0.055))),
    #000 calc(100% - max(6px, calc(var(--ws40-bubble-size) * 0.055)))
  ) !important;
}

/* Date bubbles need slightly smaller text */
.ws40-cat-datetime .ws40-bub-val,
.ws40-cat-datetime .ws40-bub-unit-inline,
.ws40-cat-datetime .ws40-bubble-value,
.ws40-cat-datetime .ws40-bubble-unit {
  font-size: clamp(10px, calc(var(--ws40-bubble-size) * 0.11), 14px) !important;
  line-height: 1.08 !important;
}

/* ==== WS40 Bubble v05.05.90.2 - wrap inside shortcode/container ==== */

/* Let bubbles wrap when horizontal space ends */
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-wrap,
.ws40-bubble-preview {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--ws40-bubble-gap, 10px) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

/* Every bubble uses the computed size, but can wrap to next row */
.ws40-bubble-card,
.ws40-bubble,
.ws40-card-bubble,
.ws40-bub {
  flex: 0 0 var(--ws40-bubble-size, 120px) !important;
  width: var(--ws40-bubble-size, 120px) !important;
  min-width: var(--ws40-bubble-size, 120px) !important;
  max-width: var(--ws40-bubble-size, 120px) !important;
  height: var(--ws40-bubble-size, 120px) !important;
  min-height: var(--ws40-bubble-size, 120px) !important;
  max-height: var(--ws40-bubble-size, 120px) !important;
}

/* Keep inner spacing tied to actual bubble size */
.ws40-bubble-card .ws40-bubble-inner,
.ws40-bubble .ws40-bubble-inner,
.ws40-card-bubble .ws40-bubble-inner,
.ws40-bub-inner,
.ws40-bub-body {
  top: calc(var(--ws40-bubble-size, 120px) * 0.08) !important;
  right: calc(var(--ws40-bubble-size, 120px) * 0.08) !important;
  bottom: calc(var(--ws40-bubble-size, 120px) * 0.08) !important;
  left: calc(var(--ws40-bubble-size, 120px) * 0.08) !important;
}

/* ==== WS40 v05.05.90 - Bubble visual refresh and stable preview/frontend ==== */

/* Container */
.ws40-bubble-wrap{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-preview{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}

/* Bubble base */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble{
  --ws40-bub-size: 150px;
  --ws40-main-color:#2563eb;
  --ws40-soft-bg:rgba(37,99,235,.08);
  --ws40-soft-ring:rgba(37,99,235,.18);
  position:relative !important;
  width:var(--ws40-bub-size) !important;
  min-width:var(--ws40-bub-size) !important;
  max-width:var(--ws40-bub-size) !important;
  height:var(--ws40-bub-size) !important;
  min-height:var(--ws40-bub-size) !important;
  max-height:var(--ws40-bub-size) !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  padding:14px 12px !important;
  text-align:center !important;
  border:1px solid rgba(148,163,184,.28) !important;
  color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
  isolation:isolate;
  background:#ffffff !important;
}
.ws40-bub > *,
.ws40-bubble > *,
.ws40-bubble-card > *{
  position:relative;
  z-index:2;
}
.ws40-bub:before,
.ws40-bubble:before,
.ws40-bubble-card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:0;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.58) 34%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.08)),
    var(--ws40-soft-bg);
}
.ws40-bub:after,
.ws40-bubble:after,
.ws40-bubble-card:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:1;
  box-shadow: inset 0 0 0 10px var(--ws40-soft-ring);
  opacity:.9;
}

/* Metric visibility */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px !important;
  height:26px !important;
  margin:0 auto 8px auto !important;
  color:var(--ws40-main-color) !important;
}
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label{
  display:block !important;
  font-size:13px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
  color:#475569 !important;
  margin:0 auto 8px auto !important;
  max-width:92% !important;
  min-height:28px !important;
  overflow-wrap:anywhere !important;
}
.ws40-bub-metric{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; }
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:4px !important;
  font-size:clamp(18px, var(--ws40-value-size, 16px), 26px) !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#0f172a !important;
  letter-spacing:-0.02em;
  flex-wrap:wrap !important;
}
.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit{
  display:inline-block !important;
  font-size:0.74em !important;
  line-height:1 !important;
  font-weight:700 !important;
  opacity:.9 !important;
  color:inherit !important;
}
.ws40-bub-last-update .ws40-bub-val{
  font-size:15px !important;
  line-height:1.15 !important;
  white-space:pre-line !important;
}

/* Gauge */
.ws40-gauge{
  position:absolute !important;
  inset:4px !important;
  border-radius:999px !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.ws40-gauge:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(from -135deg, var(--ws40-gauge-grad, var(--ws40-main-color)) 0 calc(var(--ws40-gauge-pct, .25) * 270deg), rgba(203,213,225,.55) 0 270deg, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
}
.ws40-view-number .ws40-gauge{ display:none !important; }

/* Warning/alert */
.ws40-alert-warning{ --ws40-main-color:#f59e0b !important; --ws40-soft-bg:rgba(245,158,11,.11) !important; --ws40-soft-ring:rgba(245,158,11,.22) !important; }
.ws40-alert-danger{ --ws40-main-color:#ef4444 !important; --ws40-soft-bg:rgba(239,68,68,.11) !important; --ws40-soft-ring:rgba(239,68,68,.22) !important; }

/* Direction icon */
.ws40-ic-dir{ position:relative; }
.ws40-dir-compass{
  position:absolute; inset:2px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ws40-main-color) 34%, transparent);
}
.ws40-dir-arrow{
  position:absolute; left:50%; top:50%; width:2px; height:12px; background:var(--ws40-main-color); transform-origin:center 85%; transform:translate(-50%,-75%) rotate(var(--ws40-dir-rot, 0deg));
}
.ws40-dir-arrow:before{
  content:""; position:absolute; left:50%; top:-4px; transform:translateX(-50%);
  border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid var(--ws40-main-color);
}

/* Responsive */
@media (max-width: 1100px){
  .ws40-bubble-grid,.ws40-template-bubble,.ws40-bubbles,.ws40-bubble-preview{ gap:14px !important; }
  .ws40-bub,.ws40-bubble,.ws40-bubble-card{ --ws40-bub-size:142px; width:142px !important; min-width:142px !important; max-width:142px !important; height:142px !important; min-height:142px !important; max-height:142px !important; }
}
@media (max-width: 640px){
  .ws40-bub,.ws40-bubble,.ws40-bubble-card{ --ws40-bub-size:134px; width:134px !important; min-width:134px !important; max-width:134px !important; height:134px !important; min-height:134px !important; max-height:134px !important; }
  .ws40-bub-lbl{ font-size:12px !important; min-height:24px !important; }
  .ws40-bub-val{ font-size:clamp(17px, var(--ws40-value-size, 16px), 22px) !important; }
}

/* ==== WS40 v05.05.90 - Bubble typography and inherited font fix ==== */

/* inherit theme/template font instead of forcing one */
.ws40-bubble-wrap,
.ws40-bubble-grid,
.ws40-template-bubble,
.ws40-bubbles,
.ws40-bubble-preview,
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble,
.ws40-bub *,
.ws40-bubble * {
  font-family: inherit !important;
}

/* base bubble content alignment */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  flex: 0 0 auto !important;
  margin: 0 auto 6px auto !important;
}

.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: 92% !important;
  margin: 4px auto 0 auto !important;
  min-height: auto !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #475569 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.ws40-bub-metric,
.ws40-bubble-metric {
  order: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  font-family: inherit !important;
  font-size: clamp(18px, 1.25vw + 12px, 28px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 0.68em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  opacity: .92 !important;
  color: inherit !important;
}

/* keep last update readable */
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.12 !important;
  font-size: 15px !important;
}

/* trend bubbles: smaller text for arrows to avoid awkward empty look */
.ws40-bub[data-field="temp_trend"] .ws40-bub-val,
.ws40-bub[data-field="hum_trend"] .ws40-bub-val,
.ws40-bub[data-field="wind_trend"] .ws40-bub-val,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-val,
.ws40-bubble[data-field="temp_trend"] .ws40-bub-val,
.ws40-bubble[data-field="hum_trend"] .ws40-bub-val,
.ws40-bubble[data-field="wind_trend"] .ws40-bub-val,
.ws40-bubble[data-field="pressure_trend"] .ws40-bub-val {
  font-size: 16px !important;
}

/* keep icons and labels from overlapping the gauge ring */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: relative !important;
  z-index: 3 !important;
}
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value {
  position: relative !important;
  z-index: 3 !important;
}

/* responsive tuning */
@media (max-width: 900px) {
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 11px !important;
  }
  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: clamp(16px, 1vw + 12px, 22px) !important;
  }
}

@media (max-width: 560px) {
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 16px !important;
  }
  .ws40-bub-unit-inline,
  .ws40-bub-unit,
  .ws40-bubble-unit,
  .ws40-bubble-card .unit {
    font-size: 0.64em !important;
  }
}

/* ==== WS40 v05.05.90 - Bubble rollback/fix for icons, labels, sizing ==== */

/* 1) Do NOT override icon fonts */
.ws40-bub .wi,
.ws40-bubble .wi,
.ws40-bubble-card .wi,
.ws40-bub .dashicons,
.ws40-bubble .dashicons,
.ws40-bubble-card .dashicons {
  font-family: inherit;
}
.wi,
.ws40-ic-wi .wi {
  font-family: WeatherIcons !important;
}
.dashicons {
  font-family: dashicons !important;
}

/* 2) Restore sane inherited font only for text elements */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble,
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number,
.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-family: inherit !important;
}

/* 3) Restore visible labels */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  display: block !important;
  order: 3 !important;
  width: 100% !important;
  max-width: 86% !important;
  margin: 8px auto 0 auto !important;
  min-height: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #475569 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 4) Reduce values back to readable size */
.ws40-bub-metric,
.ws40-bubble-metric {
  order: 2 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 2px auto 0 auto !important;
}

.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  gap: 3px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-size: 0.88em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

/* 5) Restore icon visibility and sizing */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  order: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 6px auto !important;
  color: var(--ws40-main-color, #2563eb) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ws40-ic-wi .wi,
.ws40-bub-ic .wi {
  font-size: 22px !important;
  line-height: 1 !important;
}

/* 6) Better vertical layout inside bubble */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* 7) Keep datetime smaller */
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.12 !important;
  font-size: 13px !important;
}

/* 8) Trend values smaller */
.ws40-bub[data-field="temp_trend"] .ws40-bub-val,
.ws40-bub[data-field="hum_trend"] .ws40-bub-val,
.ws40-bub[data-field="wind_trend"] .ws40-bub-val,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-val,
.ws40-bubble[data-field="temp_trend"] .ws40-bub-val,
.ws40-bubble[data-field="hum_trend"] .ws40-bub-val,
.ws40-bubble[data-field="wind_trend"] .ws40-bub-val,
.ws40-bubble[data-field="pressure_trend"] .ws40-bub-val {
  font-size: 12px !important;
}

/* 9) Mobile */
@media (max-width: 900px) {
  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 13px !important;
  }
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
  }
}

/* ==== WS40 v05.05.90 - Bubble label/value order sync frontend/backend ==== */

/* Ensure same vertical stack everywhere: icon -> label -> value */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble,
.ws40-bub-inner,
.ws40-bub-body,
.ws40-bubble-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
}

/* icon always first */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  order: 1 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 6px auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* label always visible and before value */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  order: 2 !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 88% !important;
  margin: 0 auto 8px auto !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #475569 !important;
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* metric/value block always after label */
.ws40-bub-metric,
.ws40-bubble-metric {
  order: 3 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* when markup has no dedicated metric wrapper, keep value centered */
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  order: 3 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  align-self: center !important;
  width: auto !important;
  max-width: 92% !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

/* units remain attached to value */
.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-family: inherit !important;
  font-size: 0.88em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: .95 !important;
}

/* keep last update readable */
.ws40-bub-last-update .ws40-bub-lbl,
.ws40-bub-last-update .ws40-bubble-label,
.ws40-bub-last-update .ws40-bubble-title {
  margin-bottom: 6px !important;
}
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  white-space: normal !important;
  line-height: 1.12 !important;
  text-align: center !important;
  font-size: 13px !important;
}

/* slightly smaller on narrow screens */
@media (max-width: 900px) {
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
  }
  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 13px !important;
  }
}

/* ==== WS40 v05.05.90 - tighten label/value spacing and vertical centering ==== */

/* central vertical alignment of content */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  justify-content: center !important;
}

/* remove artificial spacing */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  margin-bottom: 4px !important;
}

/* label closer to value */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  margin: 2px auto 2px auto !important;
}

/* value tighter */
.ws40-bub-metric,
.ws40-bubble-metric {
  margin: 0 !important;
}

/* ensure block is visually centered as a group */
.ws40-bub > *,
.ws40-bubble > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* optional micro-adjust for optical centering */
.ws40-bub-lbl {
  transform: translateY(-1px);
}
.ws40-bub-val {
  transform: translateY(1px);
}

/* ==== WS40 v05.05.90 - Bubble real inner-center structure via CSS ==== */

/* Bubble acts as geometric container */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  position: relative !important;
  overflow: hidden !important;
}

/* Hide old flow layout side effects */
.ws40-bub-inner,
.ws40-bub-body,
.ws40-bubble-inner {
  position: absolute !important;
  inset: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Build a real centered content block */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic,
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label,
.ws40-bub-metric,
.ws40-bubble-metric,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  position: relative !important;
  z-index: 3 !important;
}

/* Center the icon-value-label group as a single optical block */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 50% !important;
  top: 30% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  position: absolute !important;
  left: 50% !important;
  top: 58% !important;
  transform: translate(-50%, -50%) !important;
  width: 78% !important;
  max-width: 78% !important;
  margin: 0 !important;
  display: block !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: #475569 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.ws40-bub-metric,
.ws40-bubble-metric {
  position: absolute !important;
  left: 50% !important;
  top: 44% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  max-width: 82% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Fallback when there is no dedicated metric wrapper */
.ws40-bub-val:not(.ws40-bub-metric .ws40-bub-val),
.ws40-bubble-value:not(.ws40-bubble-metric .ws40-bubble-value),
.ws40-bubble-card .value {
  position: absolute !important;
  left: 50% !important;
  top: 44% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  max-width: 82% !important;
  margin: 0 !important;
}

/* Actual value styling */
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-family: inherit !important;
  font-size: .86em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: .95 !important;
}

/* Last update needs more space and true multiline center */
.ws40-bub-last-update .ws40-bub-lbl,
.ws40-bub-last-update .ws40-bubble-label,
.ws40-bub-last-update .ws40-bubble-title {
  top: 52% !important;
}
.ws40-bub-last-update .ws40-bub-metric,
.ws40-bub-last-update .ws40-bubble-metric,
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  top: 40% !important;
  max-width: 76% !important;
}
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.12 !important;
  font-size: 13px !important;
}

/* Trend fields: slightly tighter */
.ws40-bub[data-field="temp_trend"] .ws40-bub-lbl,
.ws40-bub[data-field="hum_trend"] .ws40-bub-lbl,
.ws40-bub[data-field="wind_trend"] .ws40-bub-lbl,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-lbl {
  top: 57% !important;
}
.ws40-bub[data-field="temp_trend"] .ws40-bub-metric,
.ws40-bub[data-field="hum_trend"] .ws40-bub-metric,
.ws40-bub[data-field="wind_trend"] .ws40-bub-metric,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-metric {
  top: 43% !important;
}

/* Responsive: keep geometry coherent */
@media (max-width: 900px) {
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic {
    width: 22px !important;
    height: 22px !important;
    top: 29% !important;
  }
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
    top: 58% !important;
  }
  .ws40-bub-metric,
  .ws40-bubble-metric,
  .ws40-bub-val,
  .ws40-bubble-value,
  .ws40-bubble-card .value {
    font-size: 13px !important;
    top: 44% !important;
  }
}

@media (max-width: 560px) {
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    width: 74% !important;
    max-width: 74% !important;
  }
}

/* ==== WS40 v05.05.90 - Bubble icons restored on gauge ==== */

/* Put icon back on the ring/gauge while keeping label/value centered */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 76% !important;
  top: 28% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Keep labels and values in the centered inner block */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  top: 60% !important;
}

.ws40-bub-metric,
.ws40-bubble-metric,
.ws40-bub-val,
.ws40-bubble-value,
.ws40-bubble-card .value {
  top: 44% !important;
}

/* Trend bubbles: slightly better optical balance */
.ws40-bub[data-field="temp_trend"] .ws40-bub-ic,
.ws40-bub[data-field="hum_trend"] .ws40-bub-ic,
.ws40-bub[data-field="wind_trend"] .ws40-bub-ic,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-ic,
.ws40-bubble[data-field="temp_trend"] .ws40-bub-ic,
.ws40-bubble[data-field="hum_trend"] .ws40-bub-ic,
.ws40-bubble[data-field="wind_trend"] .ws40-bub-ic,
.ws40-bubble[data-field="pressure_trend"] .ws40-bub-ic {
  top: 27% !important;
}

/* Keep icon sizes coherent */
.ws40-ic-wi .wi,
.ws40-bub-ic .wi {
  font-size: 22px !important;
  line-height: 1 !important;
}
.ws40-ic-svg svg,
.ws40-bub-ic svg,
.ws40-card-ic svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* Mobile: keep icon on gauge but nudge slightly inward */
@media (max-width: 900px) {
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic {
    left: 74% !important;
    top: 27% !important;
    width: 22px !important;
    height: 22px !important;
  }
}

/* ==== WS40 v05.05.90 - spacing + icon offset ==== */

/* better spacing between value and label */
.ws40-bub-lbl{
  top:62% !important;
}

.ws40-bub-metric,
.ws40-bub-val{
  top:42% !important;
}

/* slight separation */
.ws40-bub-lbl{
  margin-top:4px !important;
}

/* improve vertical centering block */
.ws40-bub-inner{
  inset:18px !important;
}

/* move icon slightly outward from gauge */
.ws40-bub-ic{
  left:82% !important;
  top:26% !important;
  transform:translate(-50%,-50%) scale(1.05) !important;
}

/* keep consistent on mobile */
@media (max-width:900px){
  .ws40-bub-ic{
    left:80% !important;
    top:25% !important;
  }
}

/* ==== WS40 v05.05.90 - fix overlap, true centering, line-height 1 ==== */

/* Use the inner area as a true centered column */
.ws40-bub-inner,
.ws40-bub-body,
.ws40-bubble-inner {
  position: absolute !important;
  inset: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Icon remains on the ring and outside the centered content block */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 84% !important;
  top: 24% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4 !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

/* Reset absolute positioning that caused overlap */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label,
.ws40-bub-metric,
.ws40-bubble-metric,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 3 !important;
}

/* Label before value, centered, readable */
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label {
  order: 1 !important;
  display: block !important;
  width: 82% !important;
  max-width: 82% !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #475569 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Value after label, centered */
.ws40-bub-metric,
.ws40-bubble-metric {
  order: 2 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 86% !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1 !important;
}

.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number {
  order: 2 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 86% !important;
  margin: 0 auto !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  gap: 3px !important;
  white-space: nowrap !important;
}

/* Units stay attached and readable */
.ws40-bub-unit-inline,
.ws40-bub-unit,
.ws40-bubble-unit,
.ws40-bubble-card .unit {
  font-family: inherit !important;
  font-size: .86em !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: .95 !important;
}

/* Trend / date special cases */
.ws40-bub-last-update .ws40-bub-inner,
.ws40-bub-last-update .ws40-bub-body,
.ws40-bub-last-update .ws40-bubble-inner {
  gap: 4px !important;
}
.ws40-bub-last-update .ws40-bub-val,
.ws40-bub-last-update .ws40-bubble-value {
  white-space: normal !important;
  text-align: center !important;
  line-height: 1 !important;
  font-size: 13px !important;
}
.ws40-bub[data-field="temp_trend"] .ws40-bub-val,
.ws40-bub[data-field="hum_trend"] .ws40-bub-val,
.ws40-bub[data-field="wind_trend"] .ws40-bub-val,
.ws40-bub[data-field="pressure_trend"] .ws40-bub-val {
  font-size: 12px !important;
}

/* Mobile */
@media (max-width: 900px) {
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic {
    left: 82% !important;
    top: 23% !important;
    width: 22px !important;
    height: 22px !important;
  }
  .ws40-bub-lbl,
  .ws40-bubble-label,
  .ws40-bubble-title,
  .ws40-bubble-card .label {
    font-size: 10px !important;
  }
  .ws40-bub-val,
  .ws40-bub-value,
  .ws40-bubble-value,
  .ws40-bubble-card .value,
  .ws40-bubble-number {
    font-size: 13px !important;
  }
}

/* ==== WS40 v05.05.90 - icon offset +10px ==== */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left:88% !important; /* + outward */
  top:22% !important;
}
@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left:86% !important;
    top:21% !important;
  }
}

/* ==== WS40 v05.05.90 - restore gauge, icon foreground + position ==== */

/* icon on top, without touching gauge internals */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  position:absolute !important;
  left: 89% !important;
  top: 22% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 8 !important;
  pointer-events:none !important;
}

/* explicit foreground for the icon glyph only */
.ws40-bub-ic .wi,
.ws40-bubble-icon .wi,
.ws40-card-ic .wi,
.ws40-bub-ic svg,
.ws40-bubble-icon svg,
.ws40-card-ic svg,
.ws40-bub-ic .dashicons,
.ws40-bubble-icon .dashicons,
.ws40-card-ic .dashicons{
  position:relative !important;
  z-index: 9 !important;
}

/* keep gauge visible: do NOT override its display or stacking context */
.ws40-gauge,
.ws40-gauge:before,
.ws40-gauge:after{
  opacity:1 !important;
  visibility:visible !important;
}

/* make sure bubble content remains below icon but above backgrounds */
.ws40-bub-inner,
.ws40-bub-body,
.ws40-bubble-inner,
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label,
.ws40-bub-metric,
.ws40-bubble-metric,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value{
  z-index: 3 !important;
}

/* mobile fine tuning */
@media (max-width: 900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left: 87% !important;
    top: 21% !important;
  }
}

/* ==== WS40 v05.05.90 - vertical icon shift +10px ==== */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  top:32% !important; /* moved down ~10px */
}
@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    top:31% !important;
  }
}

/* ==== WS40 v05.05.90 - icon fine offset ==== */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  top:37% !important;   /* +5px down */
  left:94% !important;  /* +5px right */
}
@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    top:36% !important;
    left:92% !important;
  }
}

/* ==== WS40 v05.05.90 - icon +10px right ==== */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left:104% !important;
}
@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left:102% !important;
  }
}

/* ==== WS40 v05.05.90 - icon 25px left correction ==== */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left:79% !important; /* moved left ~25px from previous */
}
@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left:77% !important;
  }
}

/* ==== WS40 v05.05.90 - gauge geometry rethink: start 45deg, end 360deg ==== */

/*
  New gauge rule for meteorological bubbles:
  - gauge starts at 45deg
  - gauge ends at 360deg
  - usable sweep = 315deg
  - remaining 0deg..45deg sector stays empty
*/
.ws40-gauge:before,
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  background:
    conic-gradient(
      from 45deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) 0deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) calc(var(--ws40-gauge-pct, .25) * 315deg),
      rgba(203,213,225,.55) calc(var(--ws40-gauge-pct, .25) * 315deg),
      rgba(203,213,225,.55) 315deg,
      transparent 315deg,
      transparent 360deg
    ) !important;
}

/* keep the ring readable with the new longer sweep */
.ws40-gauge:before {
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
}

/* icon balance on the new gauge start/end geometry */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left: 73% !important;
  top: 24% !important;
}

@media (max-width:900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left: 71% !important;
    top: 23% !important;
  }
}

/* ==== WS40 v05.05.90 - definitive frontend gauge cleanup 45deg->360deg ==== */

/* Neutralize old gauge pseudo-elements and rebuilt them with a single geometry */
.ws40-gauge,
.ws40-bubble-gauge,
.ws40-bubble-arc {
  position: absolute !important;
  inset: 4px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background: none !important;
}

.ws40-gauge::before,
.ws40-gauge::after,
.ws40-bubble-gauge::before,
.ws40-bubble-gauge::after,
.ws40-bubble-arc::before,
.ws40-bubble-arc::after,
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: none !important;
  box-shadow: none !important;
}

/* Base track: visible only on the 45deg -> 360deg sweep (315deg) */
.ws40-gauge::before,
.ws40-bubble-gauge::before,
.ws40-bubble-arc::before,
.ws40-bub.has-instrument::before,
.ws40-bub.ws40-has-gauge::before,
.ws40-bubble-card.has-instrument::before,
.ws40-bubble.has-instrument::before,
.ws40-card-bubble.has-instrument::before {
  background:
    conic-gradient(
      from 45deg,
      rgba(203,213,225,.55) 0deg 315deg,
      transparent 315deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index: 1 !important;
}

/* Fill arc: starts at 45deg and grows until 360deg, leaving 0->45 empty for the icon */
.ws40-gauge::after,
.ws40-bubble-gauge::after,
.ws40-bubble-arc::after {
  background:
    conic-gradient(
      from 45deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) 0deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) calc(var(--ws40-gauge-pct, .25) * 315deg),
      transparent calc(var(--ws40-gauge-pct, .25) * 315deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index: 2 !important;
}

/* When the gauge is injected on the bubble itself, use the bubble pseudo-element as the track only,
   and let .ws40-gauge::after/.ws40-bubble-gauge::after be the colored fill */
.ws40-view-number .ws40-gauge,
.ws40-view-number .ws40-bubble-gauge,
.ws40-view-number .ws40-bubble-arc {
  display: none !important;
}

/* Icon sits in the intentionally empty 0->45deg sector */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  left: 81% !important;
  top: 19% !important;
  z-index: 8 !important;
}

@media (max-width: 900px) {
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic {
    left: 79% !important;
    top: 18% !important;
  }
}

/* ==== WS40 v05.05.90 - gauge function fix: 45deg start, 360deg end ==== */

/* Use only the dedicated gauge element. Do not hijack bubble pseudo-elements. */
.ws40-gauge{
  position:absolute !important;
  inset:4px !important;
  border-radius:999px !important;
  pointer-events:none !important;
  z-index:1 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:none !important;
}

/* Track: only from 45deg to 360deg, leaving 0->45deg empty for the icon */
.ws40-gauge::before{
  background:
    conic-gradient(
      from 45deg,
      rgba(203,213,225,.55) 0deg 315deg,
      transparent 315deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:1 !important;
}

/* Fill: starts at 45deg and ends at the absolute angle stored in --ws40-gauge-rot */
.ws40-gauge::after{
  background:
    conic-gradient(
      from 45deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) 0deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:2 !important;
}

/* If view is number, the gauge must stay hidden */
.ws40-view-number .ws40-gauge{
  display:none !important;
}

/* Keep content above the gauge */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  z-index:8 !important;
}
.ws40-bub-inner,
.ws40-bub-body,
.ws40-bubble-inner,
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label,
.ws40-bub-metric,
.ws40-bubble-metric,
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value{
  z-index:3 !important;
}

/* ==== WS40 v05.05.90 - coherent Bubble gauge mapping to configured ranges ==== */

/*
  Requested rule applied consistently to every Bubble gauge:
  - configured MIN  => 45deg
  - configured MAX  => 360deg
  - useful sweep    => 315deg
  - sector 0deg..45deg left empty
  PHP computes --ws40-gauge-rot from the configured min/max of each instrument.
*/
.ws40-gauge{
  position:absolute !important;
  inset:4px !important;
  border-radius:999px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:none !important;
}

/* Track shown only on the requested 45deg -> 360deg arc */
.ws40-gauge::before{
  background:
    conic-gradient(
      from 45deg,
      rgba(203,213,225,.55) 0deg 315deg,
      transparent 315deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:1 !important;
}

/* Fill uses the final angle already computed by PHP from the saved min/max range of each bubble */
.ws40-gauge::after{
  background:
    conic-gradient(
      from 45deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) 0deg,
      var(--ws40-gauge-grad, var(--ws40-main-color)) calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:2 !important;
}

/* Number-only view must not draw the gauge */
.ws40-view-number .ws40-gauge{
  display:none !important;
}

/* ==== WS40 v05.05.90 - gauge visible again, same requested mapping ==== */

/*
  Functional fix only:
  - keep the requested mapping MIN=45deg / MAX=360deg
  - keep the empty 0deg..45deg sector
  - draw the gauge with a solid fill color so the arc is actually visible
  - do not change anything else in Bubble layout
*/
.ws40-gauge{
  position:absolute !important;
  inset:4px !important;
  border-radius:999px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:none !important;
  z-index:1 !important;
}

/* Track from 45deg to 360deg */
.ws40-gauge::before{
  background:
    conic-gradient(
      from 45deg,
      rgba(203,213,225,.55) 0deg 315deg,
      transparent 315deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:1 !important;
}

/* Fill from 45deg to the angle computed in PHP from the configured min/max range */
.ws40-gauge::after{
  background:
    conic-gradient(
      from 45deg,
      var(--ws40-main-color, #2563eb) 0deg,
      var(--ws40-main-color, #2563eb) calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent calc(var(--ws40-gauge-rot, 45deg) - 45deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:2 !important;
}

/* Number-only view still hides the gauge */
.ws40-view-number .ws40-gauge{
  display:none !important;
}

/* ==== WS40 v05.05.90 - definitive Bubble gauge mapping: 90deg to 360deg ==== */

/*
  Single convention used everywhere:
  - MIN configured => 90deg
  - MAX configured => 360deg
  - useful sweep   => 270deg
  - the free sector is 0deg..90deg
  The fill angle is computed in PHP and exposed as --ws40-gauge-rot.
*/

.ws40-gauge{
  position:absolute !important;
  inset:4px !important;
  border-radius:999px !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:none !important;
  z-index:1 !important;
}

.ws40-gauge::before,
.ws40-gauge::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  box-shadow:none !important;
}

/* Track from 90deg to 360deg */
.ws40-gauge::before{
  background:
    conic-gradient(
      from 90deg,
      rgba(203,213,225,.55) 0deg 270deg,
      transparent 270deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:1 !important;
}

/* Fill from 90deg to the final angle computed from the saved min/max range */
.ws40-gauge::after{
  background:
    conic-gradient(
      from 90deg,
      var(--ws40-main-color, #2563eb) 0deg,
      var(--ws40-main-color, #2563eb) calc(var(--ws40-gauge-rot, 90deg) - 90deg),
      transparent calc(var(--ws40-gauge-rot, 90deg) - 90deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px)) !important;
  z-index:2 !important;
}

/* number-only view still must hide the gauge */
.ws40-view-number .ws40-gauge{
  display:none !important;
}

/* keep icon in the free 0deg..90deg sector, visually top-right */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left: 84% !important;
  top: 18% !important;
  z-index: 8 !important;
}

@media (max-width: 900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left: 82% !important;
    top: 17% !important;
  }
}

/* ==== WS40 v05.05.90 - meteo icon at 45deg, shifted 15px left ==== */

/*
  Requested only:
  - place meteo icon at 45° on the bubble
  - then move it 15px left
  No other Bubble changes.
*/
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  left: calc(50% + 45px - 15px) !important;
  top: calc(50% - 45px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 8 !important;
}

@media (max-width: 900px){
  .ws40-bub-ic,
  .ws40-bubble-icon,
  .ws40-card-ic{
    left: calc(50% + 40px - 15px) !important;
    top: calc(50% - 40px) !important;
  }
}

/* ==== WS40 v05.05.90 - radial icon placement from bubble center ==== */

/*
  Functional fix only:
  - icon anchored to the true center of the bubble
  - then rotated to 45deg
  - then translated to the ring radius
  - then shifted 15px left as requested before
  This makes icon position independent from label/value/trend content.
*/

.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  --ws40-icon-radius: 60px;
  --ws40-icon-shift-x: -15px;
  --ws40-icon-shift-y: 0px;
}

.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: none !important;

  /* center -> rotate to 45deg -> go to ring radius -> shift 15px left */
  transform:
    translate(-50%, -50%)
    rotate(45deg)
    translate(var(--ws40-icon-radius))
    rotate(-45deg)
    translate(var(--ws40-icon-shift-x), var(--ws40-icon-shift-y)) !important;
}

/* ==== WS40 v05.05.90 - true 45° icon placement on bubble ==== */

/*
  Fix only the icon angle:
  previous build used rotate(45deg), which in CSS transform geometry
  sends the icon toward bottom-right.
  For the requested visual 45° position on the bubble (upper-right),
  the radial transform must use -45deg, then counter-rotate +45deg.
*/
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  --ws40-icon-radius: 60px;
  --ws40-icon-shift-x: -15px;
  --ws40-icon-shift-y: 0px;
}

.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: none !important;

  transform:
    translate(-50%, -50%)
    rotate(-45deg)
    translate(var(--ws40-icon-radius))
    rotate(45deg)
    translate(var(--ws40-icon-shift-x), var(--ws40-icon-shift-y)) !important;
}

@media (max-width: 900px) {
  .ws40-bub,
  .ws40-bubble,
  .ws40-bubble-card,
  .ws40-card-bubble {
    --ws40-icon-radius: 56px;
  }
}

@media (max-width: 560px) {
  .ws40-bub,
  .ws40-bubble,
  .ws40-bubble-card,
  .ws40-card-bubble {
    --ws40-icon-radius: 53px;
  }
}

/* ==== WS40 v05.05.90 - icon radius tied to bubble size, no overflow on trend ==== */

/*
  Fix only the icon overflow problem:
  the previous build used a fixed radius (60px), which became too large
  on smaller frontend bubbles and pushed trend icons outside the circle.
  Now the icon radius is derived from the actual bubble size.
*/

.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble {
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 16px);
  --ws40-icon-shift-x: -15px;
  --ws40-icon-shift-y: 0px;
}

.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: none !important;

  /* true upper-right 45deg placement, radius scaled to actual bubble size */
  transform:
    translate(-50%, -50%)
    rotate(-45deg)
    translate(var(--ws40-icon-radius))
    rotate(45deg)
    translate(var(--ws40-icon-shift-x), var(--ws40-icon-shift-y)) !important;
}

/* ==== WS40 v05.05.90 - trend bubbles use reduced icon radius via data-field ==== */

/* Default radius for all bubbles */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble{
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 16px);
  --ws40-icon-shift-x: -15px;
  --ws40-icon-shift-y: 0px;
}

/* Trend bubbles do NOT have .trend class; they have data-field names ending with _trend */
.ws40-bub[data-field$="_trend"],
.ws40-bubble[data-field$="_trend"],
.ws40-bubble-card[data-field$="_trend"],
.ws40-card-bubble[data-field$="_trend"]{
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 28px);
}

/* Same radial geometry for all, only radius changes on trend bubbles */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  margin:0 !important;
  width:24px !important;
  height:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:8 !important;
  pointer-events:none !important;
  transform:
    translate(-50%, -50%)
    rotate(-45deg)
    translate(var(--ws40-icon-radius))
    rotate(45deg)
    translate(var(--ws40-icon-shift-x), var(--ws40-icon-shift-y)) !important;
}

/* ==== WS40 v05.05.90 - final alignment: identical visual position ==== */

/* base radius */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble{
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 16px);
  --ws40-icon-shift-x: -15px;
}

/* trend bubbles need slightly more inward pull to match visually */
.ws40-bub[data-field$="_trend"],
.ws40-bubble[data-field$="_trend"],
.ws40-bubble-card[data-field$="_trend"],
.ws40-card-bubble[data-field$="_trend"]{
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 22px);
}

/* same geometry everywhere */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  transform:
    translate(-50%, -50%)
    rotate(-45deg)
    translate(var(--ws40-icon-radius))
    rotate(45deg)
    translate(var(--ws40-icon-shift-x), 0px) !important;
}

/* ==== WS40 v05.05.90 - uniform icon placement for all bubbles, including all trend types ==== */

/*
  Functional correction only:
  - stop using different radii for trend bubbles
  - stop using radial rotate/translate logic that produced misleading movement
  - place every meteo icon with the SAME cartesian coordinates from the true bubble center
  - requested visual target remains the 45° sector (upper-right), shifted 15px left
*/

.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble{
  --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 16px);
  --ws40-icon-dx: calc(var(--ws40-icon-radius) * 0.7071);
  --ws40-icon-dy: calc(var(--ws40-icon-radius) * 0.7071);
}

/* One identical rule for all icons, trend included */
.ws40-bub-ic,
.ws40-bubble-icon,
.ws40-card-ic{
  position: absolute !important;
  left: calc(50% + var(--ws40-icon-dx) - 15px) !important;
  top: calc(50% - var(--ws40-icon-dy)) !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 8 !important;
  pointer-events: none !important;
}

/* Keep the same rule on trend bubbles explicitly, to override older special cases */
.ws40-bub[data-field$="_trend"] .ws40-bub-ic,
.ws40-bubble[data-field$="_trend"] .ws40-bubble-icon,
.ws40-bubble-card[data-field$="_trend"] .ws40-bubble-icon,
.ws40-card-bubble[data-field$="_trend"] .ws40-card-ic{
  left: calc(50% + var(--ws40-icon-dx) - 15px) !important;
  top: calc(50% - var(--ws40-icon-dy)) !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 900px){
  .ws40-bub,
  .ws40-bubble,
  .ws40-bubble-card,
  .ws40-card-bubble{
    --ws40-icon-radius: calc((var(--ws40-bub-size, 150px) / 2) - 16px);
    --ws40-icon-dx: calc(var(--ws40-icon-radius) * 0.7071);
    --ws40-icon-dy: calc(var(--ws40-icon-radius) * 0.7071);
  }
}

/* ==== WS40 v05.05.94 - Bubble style consolidation + 3D preset ==== */

/* Shared preset base to keep all styles coherent */
.ws40-bub,
.ws40-bubble,
.ws40-bubble-card,
.ws40-card-bubble{
  background:#fff;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  color:#0f172a;
}
.ws40-bub-lbl,
.ws40-bubble-label,
.ws40-bubble-title,
.ws40-bubble-card .label{
  color:#475569;
}
.ws40-bub-val,
.ws40-bub-value,
.ws40-bubble-value,
.ws40-bubble-card .value,
.ws40-bubble-number{
  color:#0f172a;
}
.ws40-gauge::before{
  background:
    conic-gradient(
      from 90deg,
      rgba(203,213,225,.55) 0deg 270deg,
      transparent 270deg 360deg
    ) !important;
}

/* CLASSIC */
.ws40-preset-classic .ws40-bub,
.ws40-preset-classic .ws40-bubble,
.ws40-preset-classic .ws40-bubble-card{
  background:#ffffff !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
}

/* 3D */

.ws40-preset-3d .ws40-bub,
.ws40-preset-3d .ws40-bubble,
.ws40-preset-3d .ws40-bubble-card{
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(255,255,255,.70) 26%, transparent 40%),
    radial-gradient(circle at 65% 72%, rgba(15,23,42,.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #e9eef5 100%) !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(148,163,184,.18),
    0 14px 22px rgba(15,23,42,.14),
    0 4px 8px rgba(15,23,42,.10) !important;
  transform: translateZ(0);
}
.ws40-preset-3d .ws40-bub::after,
.ws40-preset-3d .ws40-bubble::after,
.ws40-preset-3d .ws40-bubble-card::after{
  box-shadow:
    inset 0 0 0 10px color-mix(in srgb, var(--ws40-main-color, #2563eb) 16%, transparent),
    inset 0 -5px 10px rgba(15,23,42,.10) !important;
}
.ws40-preset-3d .ws40-bub-val,
.ws40-preset-3d .ws40-bub-value,
.ws40-preset-3d .ws40-bubble-value,
.ws40-preset-3d .ws40-bubble-card .value,
.ws40-preset-3d .ws40-bubble-number{
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}


/* ==== WS40 v05.05.94 - Bubble preset activation fix ==== */

/* Make preset styles work whether the wrapper exposes a class or only data-preset */
.ws40-bubble-wrap[data-preset="classic"] .ws40-bub,
.ws40-bubble-wrap[data-preset="classic"] .ws40-bubble,
.ws40-bubble-wrap[data-preset="classic"] .ws40-bubble-card {
  background:#ffffff !important;
  border-color:rgba(148,163,184,.24) !important;
  box-shadow:0 6px 14px rgba(15,23,42,.08) !important;
}

.ws40-bubble-wrap[data-preset="3d"] .ws40-bub,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.98), rgba(255,255,255,.70) 26%, transparent 40%),
    radial-gradient(circle at 65% 72%, rgba(15,23,42,.12), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #e9eef5 100%) !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(148,163,184,.18),
    0 14px 22px rgba(15,23,42,.14),
    0 4px 8px rgba(15,23,42,.10) !important;
  transform: translateZ(0);
}
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card::after {
  box-shadow:
    inset 0 0 0 10px color-mix(in srgb, var(--ws40-main-color, #2563eb) 16%, transparent),
    inset 0 -5px 10px rgba(15,23,42,.10) !important;
}
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-val,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card .value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-number {
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}


/* ==== WS40 v05.05.99 - Bubble 3D restored with slimmer inner gray ring and soft inward fade ==== */
.ws40-preset-3d .ws40-bub,
.ws40-preset-3d .ws40-bubble,
.ws40-preset-3d .ws40-bubble-card,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card{
  position:relative !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.78) 22%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 72% 78%, rgba(71,85,105,.18) 0%, rgba(71,85,105,0) 34%),
    linear-gradient(145deg, #fefefe 0%, #e3e8ef 58%, #d8dee7 100%) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:
    inset 7px 7px 14px rgba(15,23,42,.10),
    inset -8px -8px 16px rgba(255,255,255,.88),
    inset 0 -14px 18px rgba(100,116,139,.12),
    10px 14px 24px rgba(15,23,42,.20),
    0 4px 8px rgba(15,23,42,.08) !important;
}

.ws40-preset-3d .ws40-bub::before,
.ws40-preset-3d .ws40-bubble::before,
.ws40-preset-3d .ws40-bubble-card::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card::before{
  content:"";
  position:absolute;
  left:16%;
  top:10%;
  width:60%;
  height:28%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 80%);
  pointer-events:none;
  z-index:1;
}

.ws40-preset-3d .ws40-bub::after,
.ws40-preset-3d .ws40-bubble::after,
.ws40-preset-3d .ws40-bubble-card::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 0 0 6px rgba(203,213,225,.20),
    inset 0 0 0 9px rgba(203,213,225,.08),
    inset 0 -4px 10px rgba(15,23,42,.08),
    inset -4px -4px 10px rgba(255,255,255,.48) !important;
  pointer-events:none;
  z-index:1;
}

.ws40-preset-3d .ws40-bub > *,
.ws40-preset-3d .ws40-bubble > *,
.ws40-preset-3d .ws40-bubble-card > *,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub > *,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble > *,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card > *{
  position:relative;
  z-index:2;
}

.ws40-preset-3d .ws40-gauge,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge{
  filter:
    drop-shadow(0 2px 2px rgba(15,23,42,.14))
    drop-shadow(0 5px 8px rgba(15,23,42,.10));
}

.ws40-preset-3d .ws40-gauge::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::before{
  inset:8px !important;
  background:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.00) 0deg 2deg,
      rgba(203,213,225,.82) 2deg 270deg,
      transparent 270deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), rgba(0,0,0,.98) calc(100% - 7px), rgba(0,0,0,.64) calc(100% - 4px), transparent calc(100% - 1px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), rgba(0,0,0,.98) calc(100% - 7px), rgba(0,0,0,.64) calc(100% - 4px), transparent calc(100% - 1px)) !important;
  box-shadow:
    inset 4px 4px 10px rgba(15,23,42,.20),
    inset -4px -4px 10px rgba(255,255,255,.58),
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(100,116,139,.12);
}

.ws40-preset-3d .ws40-gauge::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::after{
  inset:8px !important;
  background:
    conic-gradient(
      from -135deg,
      color-mix(in srgb, var(--ws40-gauge-color, #ef4444) 78%, white) 0deg,
      color-mix(in srgb, var(--ws40-gauge-color, #ef4444) 92%, white) 12deg,
      var(--ws40-gauge-color, #ef4444) 78deg,
      color-mix(in srgb, var(--ws40-gauge-color, #ef4444) 78%, #b91c1c) var(--ws40-gauge-angle, 180deg),
      transparent var(--ws40-gauge-angle, 180deg),
      transparent 360deg
    ),
    conic-gradient(
      from -135deg,
      rgba(255,255,255,.34) 0deg,
      rgba(255,255,255,.34) var(--ws40-gauge-angle, 180deg),
      transparent var(--ws40-gauge-angle, 180deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), rgba(0,0,0,.98) calc(100% - 10px), rgba(0,0,0,.98) calc(100% - 4px), transparent calc(100% - 1px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), rgba(0,0,0,.98) calc(100% - 10px), rgba(0,0,0,.98) calc(100% - 4px), transparent calc(100% - 1px)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(127,29,29,.28),
    0 2px 3px rgba(15,23,42,.18),
    0 5px 8px rgba(15,23,42,.08);
  opacity: 1 !important;
}

.ws40-preset-3d .ws40-bub-val,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-val{
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}

.ws40-preset-3d .ws40-bub-ic,
.ws40-preset-3d .ws40-bubble-icon,
.ws40-preset-3d .ws40-card-ic,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-ic,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-icon,
.ws40-bubble-wrap[data-preset="3d"] .ws40-card-ic{
  filter:drop-shadow(0 2px 3px rgba(15,23,42,.24));
  opacity:.96 !important;
}

.ws40-preset-3d .ws40-bub-ic .wi,
.ws40-preset-3d .ws40-bubble-icon .wi,
.ws40-preset-3d .ws40-card-ic .wi,
.ws40-preset-3d .ws40-bub-ic svg,
.ws40-preset-3d .ws40-bubble-icon svg,
.ws40-preset-3d .ws40-card-ic svg,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-ic .wi,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-icon .wi,
.ws40-bubble-wrap[data-preset="3d"] .ws40-card-ic .wi,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-ic svg,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-icon svg,
.ws40-bubble-wrap[data-preset="3d"] .ws40-card-ic svg{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.28));
}

.ws40-preset-3d .ws40-bub-lbl,
.ws40-preset-3d .ws40-bubble-label,
.ws40-preset-3d .ws40-bubble-title,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-lbl,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-label,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-title{
  text-shadow:0 1px 0 rgba(255,255,255,.62);
}

.ws40-preset-3d .ws40-bub-val,
.ws40-preset-3d .ws40-bub-value,
.ws40-preset-3d .ws40-bubble-value,
.ws40-preset-3d .ws40-bubble-card .value,
.ws40-preset-3d .ws40-bubble-number,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-val,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bub-value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-card .value,
.ws40-bubble-wrap[data-preset="3d"] .ws40-bubble-number{
  text-shadow:0 1px 0 rgba(255,255,255,.72), 0 2px 2px rgba(148,163,184,.08);
}


/* ==== WS40 v05.06.01 - Bubble 3D gauge cross-browser hardening ==== */
/*
  Goal:
  - remove browser-fragile effects from the 3D gauge arc
  - avoid artifacts caused by drop-shadow/color-mix on masked conic gradients
  - keep the 3D feel with simpler, more compatible layers
*/
.ws40-preset-3d .ws40-gauge,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge{
  --ws40-gauge-start: 90deg;
  --ws40-gauge-sweep: calc(var(--ws40-gauge-rot, 90deg) - var(--ws40-gauge-start));
  position:absolute !important;
  inset:8px !important;
  border-radius:50% !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
  background:none !important;
  filter:none !important;
  box-shadow:none !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  isolation:isolate !important;
}

.ws40-preset-3d .ws40-gauge::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::before,
.ws40-preset-3d .ws40-gauge::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

.ws40-preset-3d .ws40-gauge::before,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::before{
  background:
    conic-gradient(
      from 90deg,
      rgba(197,205,216,.88) 0deg 270deg,
      transparent 270deg 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px), #000 calc(100% - 3px), transparent calc(100% - 1px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px), #000 calc(100% - 3px), transparent calc(100% - 1px)) !important;
  box-shadow:
    inset 2px 2px 5px rgba(15,23,42,.14),
    inset -2px -2px 5px rgba(255,255,255,.56),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(148,163,184,.12) !important;
  z-index:1 !important;
}

.ws40-preset-3d .ws40-gauge::after,
.ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::after{
  background:
    conic-gradient(
      from 90deg,
      rgba(255,255,255,.34) 0deg,
      rgba(255,255,255,.16) var(--ws40-gauge-sweep),
      transparent calc(var(--ws40-gauge-sweep) + .35deg),
      transparent 360deg
    ),
    conic-gradient(
      from 90deg,
      var(--ws40-main-color, #ef4444) 0deg,
      var(--ws40-main-color, #ef4444) var(--ws40-gauge-sweep),
      transparent calc(var(--ws40-gauge-sweep) + .35deg),
      transparent 360deg
    ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px), #000 calc(100% - 3px), transparent calc(100% - 1px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px), #000 calc(100% - 3px), transparent calc(100% - 1px)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(127,29,29,.18) !important;
  outline:1px solid transparent !important;
  z-index:2 !important;
}

@supports ((-webkit-mask-composite: source-in) or (mask-composite: intersect)){
  .ws40-preset-3d .ws40-gauge::after,
  .ws40-bubble-wrap[data-preset="3d"] .ws40-gauge::after{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.42) 0%,
        rgba(255,255,255,.14) 38%,
        rgba(127,29,29,.18) 100%),
      linear-gradient(180deg,
        var(--ws40-main-color, #ef4444) 0%,
        var(--ws40-main-color, #ef4444) 100%) !important;
    -webkit-mask:
      radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px), #000 calc(100% - 3px), transparent calc(100% - 1px)),
      conic-gradient(from 90deg, #000 0deg, #000 var(--ws40-gauge-sweep), transparent calc(var(--ws40-gauge-sweep) + .35deg), transparent 360deg),
      repeating-conic-gradient(from 90deg, #000 0deg 3.6deg, transparent 3.6deg 4.35deg) !important;
    -webkit-mask-composite: source-in, source-in !important;
    mask:
      radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px), #000 calc(100% - 3px), transparent calc(100% - 1px)),
      conic-gradient(from 90deg, #000 0deg, #000 var(--ws40-gauge-sweep), transparent calc(var(--ws40-gauge-sweep) + .35deg), transparent 360deg),
      repeating-conic-gradient(from 90deg, #000 0deg 3.6deg, transparent 3.6deg 4.35deg) !important;
    mask-composite: intersect, intersect !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(127,29,29,.22) !important;
  }
}