.hgcalc {
  --hgcalc-accent: #1f6feb;
  --hgcalc-surface: #fafafa;
  --hgcalc-border: #e6e6e6;
  --hgcalc-muted: #565656;
  --hgcalc-radius: 12px;
  border: 1px solid var(--hgcalc-border);
  border-radius: var(--hgcalc-radius);
  padding: 16px 18px;
  max-width: 720px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.03);
}

.hgcalc__row { margin-bottom: 20px; }
.hgcalc__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111;
}

.hgcalc__value { font-weight: 700; color: var(--hgcalc-accent); }

.hgcalc__slider { padding-top: 4px; }
.hgcalc input[type="range"] {
  width: 100%;
  appearance: none;
  height: 10px;
  background: linear-gradient(
      90deg,
      var(--hgcalc-accent) 0%,
      var(--hgcalc-accent) var(--hgcalc-fill, 50%),
      #e9eef5 var(--hgcalc-fill, 50%),
      #e9eef5 100%
    );
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.hgcalc input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hgcalc-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.hgcalc input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hgcalc-accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.hgcalc input[type="range"]::-moz-range-track {
  height: 10px;
  background: linear-gradient(
      90deg,
      var(--hgcalc-accent) 0%,
      var(--hgcalc-accent) var(--hgcalc-fill, 50%),
      #e9eef5 var(--hgcalc-fill, 50%),
      #e9eef5 100%
    );
  border-radius: 999px;
  border: none;
}

.hgcalc input[type="range"]:active::-webkit-slider-thumb,
.hgcalc input[type="range"]:focus-visible::-webkit-slider-thumb,
.hgcalc input[type="range"]:active::-moz-range-thumb,
.hgcalc input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.hgcalc__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--hgcalc-muted);
}

.hgcalc__result {
  background: var(--hgcalc-surface);
  border-radius: var(--hgcalc-radius);
  padding: 14px 16px;
  border: 1px solid var(--hgcalc-border);
}

.hgcalc__big { font-size: 18px; font-weight: 800; margin-bottom: 6px; color: #111; }
.hgcalc__small { font-size: 13px; color: var(--hgcalc-muted); }
.hgcalc__formula { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }