:root {
  --gauge-bg: #151735;       /* card / page background colour */
  --gauge-fill: #22ffd0;     /* neon arc */
  --gauge-border: #ffffff;   /* white tube borders */
}

.gauge {
  width: 100%;
  max-width: 260px;
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #ffffff;
  position: relative;
}

/* Semi-circle window */
.gauge__body {
  width: 200px;              /* fixed for clean geometry; tweak if needed */
  height: 100px;
  position: relative;
  overflow: hidden;          /* only show top half of circles */
}

/* Base circle for all layers */
.gauge__circle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 0;
  left: 0;
}

/* Outer white arc */
.gauge__border--outer {
  border: 2px solid var(--gauge-border);
}

/* Inner white arc (inner wall of the tube) */
.gauge__border--inner {
  border: 2px solid var(--gauge-border);
  width: 140px;
  height: 140px;
  top: 30px;   /* centre at (100,100) */
  left: 30px;
}

/* Background “track” inside the tube (unfilled part) */
.gauge__track {
  background: conic-gradient(
    from 180deg,
    rgba(255, 255, 255, 0.12) 0deg 180deg,
    transparent 180deg 360deg
  );
}

/* Fill arc: sitting on top of track, under borders */
.gauge__fill {
  background: conic-gradient(
    from 180deg,
    var(--gauge-fill) 0deg 0deg,   /* both 0; angle updated from Dash */
    transparent 0deg 360deg
  );
  transition: background 0.4s ease-out;
}

/* Inner “cover” to hide the centre so only a tube shows */
.gauge__cover-circle {
  background: var(--gauge-bg);
  width: 140px;
  height: 140px;
  top: 30px;
  left: 30px;
}

/* Number in the middle */
.gauge__center {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.gauge__value {
  font-size: 1.6rem;
  font-weight: 600;
}

.gauge__units {
  font-size: 0.8rem;
  margin-left: 0.25rem;
  opacity: 0.85;
}

/* Optional label under the gauge */
.gauge__label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}