body {
  height: auto;
  min-height: 100vh;
  padding: 72px 16px 96px;
}

.interval-container {
  width: min(100%, 920px);
}

.interval-panel {
  width: min(100%, 420px);
}

.interval-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.interval-field label {
  font-size: 0.9rem;
}

.interval-field .form-control {
  text-align: center;
}

.interval-quick-actions {
  margin-top: 12px;
}

.interval-controls {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 12px;
  justify-content: center;
  margin-top: 14px;
}

.interval-icon-button {
  background-image: radial-gradient(circle, #6b4bc3, #9b7cff, black);
}

#interval-main-control {
  background-image: radial-gradient(circle, darkgreen, green, black);
}

#interval-reset {
  background-image: radial-gradient(circle, darkblue, blue, black);
}

#interval-main-control:hover:not(:disabled) {
  background-image: radial-gradient(circle, green, rgb(0, 0, 0, 0.3));
}

#interval-reset:hover:not(:disabled) {
  background-image: radial-gradient(circle, blue, rgb(0, 0, 0, 0.3));
}

@media (max-width: 760px), (max-device-width: 760px), (hover: none), (any-hover: none), (pointer: coarse), (any-pointer: coarse) {
  .interval-panel {
    padding: 16px;
  }

  .interval-fields {
    grid-template-columns: 1fr;
  }

  .interval-controls {
    grid-template-columns: repeat(2, 56px);
  }

  .interval-icon-button {
    width: 56px;
    height: 56px;
    padding: 9px;
  }
}