.bucket-circle-lab {
  overflow: hidden;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

#bucket-circolare .formula-card p + p { margin-top: 8px; }

.bucket-circle-lab button {
  min-height: 39px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-alt);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
}

.bucket-circle-lab button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bucket-circle-lab button:focus-visible, .bucket-circle-lab input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bucket-circle-lab button:disabled { cursor: not-allowed; opacity: 0.38; }
.bucket-circle-lab [data-circle-action="play"] { min-width: 98px; border-color: var(--accent); background: var(--accent); color: var(--bg); }
.bucket-circle-lab [data-circle-action="play"]:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, var(--text)); color: var(--bg); }

.bucket-circle-lab__settings,
.bucket-circle-lab__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 14px 18px;
}

.bucket-circle-lab__settings {
  border-bottom: 1px solid var(--line);
}

.bucket-circle-lab__settings fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.bucket-circle-lab__settings legend,
.bucket-circle-lab__count {
  font-weight: 700;
}

.bucket-circle-lab__settings legend { margin-bottom: 6px; }
.bucket-circle-lab__settings label { white-space: nowrap; }
.bucket-circle-lab__settings input { accent-color: var(--accent); }
.bucket-circle-lab__count { display: flex; align-items: center; gap: 8px; }
.bucket-circle-lab__count input { width: 110px; }
.bucket-circle-lab__count output { min-width: 1ch; font-variant-numeric: tabular-nums; }

.bucket-circle-lab__stage {
  display: grid;
  grid-template-columns: minmax(250px, 400px) minmax(260px, 1fr);
  gap: 22px;
  padding: 18px;
}

.bucket-circle-lab__plot svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-alt);
}

.bucket-circle-lab__plot .field-help { margin: 7px 0 0; }
.bucket-circle-lab__side { min-width: 0; }
.bucket-circle-lab__step { margin: 0 0 10px; font-weight: 700; }
.bucket-circle-lab__calculation { min-height: 3em; margin: 0 0 15px; font-variant-numeric: tabular-nums; }
.bucket-circle-lab__buckets { display: grid; gap: 6px; }

.bucket-circle__bucket {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel-alt);
  font-variant-numeric: tabular-nums;
}

.bucket-circle__bucket span { overflow-wrap: anywhere; }
.bucket-circle__bucket.is-active { border-color: var(--accent); background: var(--accent-soft); }
.bucket-circle-lab__controls { justify-content: space-between; border-top: 1px solid var(--line); }
.bucket-circle-lab__controls [data-bucket-progress] { color: var(--muted); font-variant-numeric: tabular-nums; }
.bucket-circle-lab__result { margin: 0; padding: 0 18px 16px; overflow-wrap: anywhere; }
.bucket-circle-lab__result:empty { display: none; }

.bucket-circle__outline { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.bucket-circle__region { fill: transparent; stroke: var(--line); stroke-width: 1.5; }
.bucket-circle__region.is-active { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.bucket-circle__label { fill: var(--muted); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.bucket-circle__center { fill: var(--text); }
.bucket-circle__point { fill: var(--accent); stroke: var(--panel); stroke-width: 2; cursor: pointer; transition: r 150ms ease, opacity 150ms ease; }
.bucket-circle__point.is-pending { fill: var(--muted); opacity: 0.48; }
.bucket-circle__point.is-current { fill: #d45b54; stroke: var(--text); stroke-width: 2; }
.bucket-circle__point:focus { outline: none; stroke: #d45b54; stroke-width: 4; }

@media (max-width: 800px) {
  .bucket-circle-lab__stage { grid-template-columns: 1fr; }
  .bucket-circle-lab__plot { max-width: 400px; margin: 0 auto; }
}

@media (max-width: 520px) {
  .bucket-circle-lab__settings, .bucket-circle-lab__stage, .bucket-circle-lab__controls { padding-left: 12px; padding-right: 12px; }
  .bucket-circle-lab__controls .transport-controls { width: 100%; }
  .bucket-circle-lab__controls .transport-controls button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bucket-circle__point { transition: none; }
}

@media print {
  .bucket-circle-lab__settings, .bucket-circle-lab__controls { display: none; }
}